关于js事件传播流程
什么是JavaScript事件?
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。js事件是由访问web页面的用户引起的一系列操作。当用户执行某些操作的时候,再去执行一系列代码,或者用来获取的详细信息。例如:鼠标位置,键盘按键。
DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
- 捕获阶段:
先由文档的根节点document往事件触发对象,从外向内捕获事件对象;
- 目标阶段:
到达目标事件位置(事发地),触发事件;
- 冒泡阶段:
再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象(从内向外的DOM对象上的事件名一样)。
在js触发某个事件时会相应生成一个事件对象,而这个事件对象则会根据DOM事件流的方向进传递,而传递的顺序如下图所示:
停止冒泡
stopPropagation()方法
stiopPropagation()方法的的官方解释为:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。返回布尔值true或false。
event.cancelBubble = true;
兼容IE浏览器。
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
阻止默认行为
preventDefault()方法
取消事件的默认动作。这个方法通知浏览器取消执行与事件关联的默认动作。如标签的地址跳转等。
return false方法
在很多时候,return false可以替代stopPropagation()和preventDefault()。
但是并不是所有的情况下都可以用return false来替代上两种方法。
因为return false方法:不但阻止事件执行,而且会跳出,return false之后的所有事件都不会执行。