细说javascripe事件传播流程

　　当我们使用js时，经常会遇到事件传播流程的问题，下面我说一下我的观点。

　　在js触发某个事件时会相应生成一个事件对象，而这个事件对象则会根据DOM事件流的方向进传递，而传递的顺序如下图所示：

　　

　　事件对象会随着DOM事件流从Window依次向下，最终传递给事件目标。但是在这个过程开始之前，事件对象的传递路径需要先被确定下来。一旦确定了传播路径，事件对象就会经过一个或多个事件阶段。有三个事件阶段：捕获阶段，目标阶段和冒泡阶段。

　　这个传递路径是一个有序的列表，里面包含了传递到事件目标需要经过的节点。而传递路径反映了文档的树结构。列表里面的最后一项就是事件目标，列表里面先于它的项指向目标的祖先节点，它的上一项指向目标的父节点。

　　

　　一旦传递路径被确定了，事件对象就可以经历一个或者多个事件阶段。通常有三个阶段：捕获阶段，目标阶段，冒泡阶段。某些阶段可能会被跳过，如果浏览器不支持，或者事件对象的传播被停止了。例如，如果把cancelBubble设置为true，冒泡阶段将会被跳过，或者stopPropagation()方法在传递之前就被调用的话，之后所有的阶段都会被跳过。

• 捕获阶段：事件对象从目标的祖先节点Window开始传播直至目标。
• 目标阶段：事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作，那么事件到此就结束了。
• 冒泡阶段：事件对象以一个相反的方向进行传递，从目标开始，到Window对象结束。

　　

　　事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（ 最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。

　　某些事件可用于控制实现下一步可能采取的行为（或撤消实现已执行的操作）。此类别中的事件被认为是可取消的，要取消事件，请调用以下方法。　　

　　stiopPropagation()方法

　　stiopPropagation()方法的的官方解释为：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

　　preventDefault()方法

　　取消事件的默认动作。

　　这个方法通知浏览器取消执行与事件关联的默认动作。如<a>标签的地址跳转等。

 

　　return false方法

　　对于这个方法，相信同学们一定不会陌生。在甚多时候，return false可以替代stopPropagation()和preventDefault()。

　　但是并不是所有的情况下都可以用return false来替代上两种方法。

　　因为return false方法：不但阻止事件执行，而且会跳出，return false之后的所有事件都不会执行。

 

　　需要注意的是，我们无法在事件捕获阶段阻止事件冒泡！！！

以上就是js事件传播的流程和阻止方法，希望对您有帮助！

欢迎加关注啊！么么哒...