事件

事件是指可以被JavaScript侦测到的行为

（JavaScript程序采用了异步事件驱动编程（Event-driven programming）模型。）

自定义事件

Event构造器

JavaScript提供Event、CustomEvent等构造器使开发可以自定义事件，这里用Event做创建自定义事件

dispatchEvent

对于标准浏览器，其提供了可供元素触发自定义事件的方法：element.dispatchEvent()。

语法

event = new Event(typeArg, {}<eventInit>);

参数

参数1：表示所创建事件的名称。
参数2：{}

"bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
"cancelable"，可选，Boolean类型，默认值为 false，表示该事件能否被取消。
"composed"，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。

代码

<body>
  <div id="div"></div>
  <script>
    let oDiv = document.getElementById('div');
    let lookEvent = new Event("look", {"bubbles":true, "cancelable":false});
    oDiv.addEventListener('look', () => { console.log('oDiv执行了look事件')});
    oDiv.dispatchEvent(lookEvent);
  </script>
</body>

结果：

在创建Event时候，参数bubbles=true也就是开启冒泡，现在给window、document也添加上look事件

<body>
  <div id="div"></div>
  <script>
    let oDiv = document.getElementById('div');
    let lookEvent = new Event("look", {"bubbles":true, "cancelable":false});
    oDiv.addEventListener('look', () => { console.log('oDiv执行了look事件')});
    window.addEventListener('look', () => {console.log('window执行了look事件')}, false)
    document.addEventListener('look', () => {console.log('document执行了look事件')}, false)
    oDiv.dispatchEvent(lookEvent);
  </script>
</body>

结果：

可以看到，只触发了oDiv，但是window、document也跟着触发了

事件流

事件对象被调度到事件目标的时候，在分发给事件目标前，会先确定事件对象的传播路径，一旦确定传播路径，事件对象就会经过一个或多个事件阶段，事件有3个阶段:捕获阶段、目标阶段、冒泡阶段

事件流出现的原因：

但事件重叠的时候，谁先触发

解决方式：

捕获阶段：由网景公司提出，Netscape Navigator4.0使用的解决方案是capture（由外到内），过去只使用捕获
冒泡阶段：由ie提出，ie的解决方案正好相反，bubble （由内到外），过去只使用冒泡
w3c则将两个阶段都应用在现代浏览器上，由事件对象决定自身在哪个阶段运行，默认是冒泡

例子：

<body>
	<div class="wrapper">
		<div class="outer">
			<div class="inner"></div>
		</div>
	</div>
	<script type="text/javascript">
		//子元素的点击事件会向父元素传递点击事件，这就算冒泡现象
		var wrapper = document.getElementsByClassName('wrapper')[0];
		var outer = wrapper.getElementsByClassName('outer')[0];
		var inner = outer.getElementsByClassName('inner')[0];
		window.addEventListener('click', function () {
			console.log('window')
		}, false)
		document.addEventListener('click', function () {
			console.log('document')
		}, false)
		wrapper.addEventListener('click', function () {
			console.log('wrapper');
		}, false);
		outer.addEventListener('click', function () {
			console.log('outer');
		}, false);
		inner.addEventListener('click', function () {
			console.log('冒泡inner');
		}, false);

		// //父元素的点击事件会向子元素传递点击事件，这就算事件捕获
		window.addEventListener('click', function () {
			console.log('window')
		}, true)
		document.addEventListener('click', function () {
			console.log('document')
		}, true)
		wrapper.addEventListener('click', function () {
			console.log('wrapper');
		}, true);
		outer.addEventListener('click', function () {
			console.log('outer');
		}, true);
		inner.addEventListener('click', function () {
			console.log('捕获inner');
		}, true);

	</script>
</body>

点击inner盒子

将目标阶段的两个事件掉换下执行位置

从结果可以看出

捕获阶段比冒泡阶段先执行，而目标阶段是不存在捕获和冒泡的。

事件，事件流

事件

自定义事件

Event构造器

dispatchEvent

语法

参数

代码

结果：

结果：

事件流

事件流出现的原因：

解决方式：

例子：