背景介绍
事件冒泡和事件捕分别由微软和网景公司提出,这两个概念的提出都是为了解决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);