详细介绍JS中的事件机制：捕获、目标、冒泡

背景介绍

事件冒泡和事件捕分别由微软和网景公司提出,这两个概念的提出都是为了解决js中事件流(事件执行顺序)。目前w3c已经同时支持这两个事件流。通过设置addeventListener的第三个参数指定事件是在冒泡阶段或者捕获阶段执行。

1.事件冒泡与事件捕获

大家思考一下下面的代码,当我点击了class为inner的区域c1和c2的执行顺序是什么呢?

	<div class='outer' onclick="c1()">
			<button 在这里插入代码片lass='inner' onclick="c2()">
			</button>
	</div>

1.1 事件冒泡

事件会从触发事件的元素到html的body元素一层一层的扫描,检查到有绑定的事件就执行,在上面的案例中是inner=》outer。

1.2 事件捕获

与事件冒泡相反,事件会从body元素到触发事件的元素,由外到内一层一层的扫描,检查到有绑定的事件就执行,在上面的案例中是outer=》inner。

2. JS中的事件机制

js中的事件流依次是:事件捕获阶段、目标阶段、事件冒泡阶段。

2.1 事件执行的时机

添加事件的方式

1.行内点击事件
<div onclick='fn()'> </div>

2.获取DOM绑定点击事件
document.getelementById('inner').onclick=fn();

3.通过事件监听绑定点击事件
document.getelementById('inner').addEventListener('click',fn);

上面三种事件只有addEventListener的方式支持设置事情的执行时机。该方法的第三个参数默认为false,在冒泡阶段执行。如果需要让事件在捕获阶段执行只需将第三个参数设置成true.

document.getelementById('inner').addEventListener('click',fn,true);