关于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之后的所有事件都不会执行。