js事件传播流程以及---捕获冒泡兼容写法（精简写法）

事件

Javascript与HTML之间的交互是通过事件实现。
事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件流

事件流是从页面接收事件的顺序。在一个html页面中，dom元素组成一颗dom树，由于子元素一般所处的位置都会在父元素之中。那么，当这个子元素被点击时候，可以认为子元素受到了点击，也可以认为父元素受到点击。那么确定谁先接收这个点击事件就成了浏览器需要解决的问题。
“DOM2级事件”规定的事件流包括三个阶段：首先发生的是事件捕获，然后处于目标阶段，最后才事件冒泡。单击div时，首先document获得点击事件，依次到、，之后事件捕获结束。事件捕获的意义在于，能够在目标获得点击事件之前截获事件，并对其作出相应的处理。处于目标阶段时，div能够执行绑定的事件处理程序，之后再到事件冒泡阶段。即使“DOM2级事件”规范明确规定捕获阶段不会涉及事件目标，但是浏览器基本都会 实现在捕获阶段触发事件对象上的事件，也就是说，可以在事件捕获阶段触发事件对象的事件处理程序，这种情况通常都需要在绑定事件处理程序的情况下指明可在捕获阶段触发。如果非必须，最好不要使用事件捕获。

DOM事件流包括三个阶段。

1：事件捕获阶段
:2：处于目标阶段
:3：事件冒泡阶段

第一阶段：“捕获阶段”（capture phase）：由Netscape Communicator团队提出来的，Netscape Communicator团队提出了一种与IE完全相反的一种解决办法，接收事件的顺序为根节点到具体的节点，这种方法就是事件捕获；当用户点击了div,则click事件将按照document—>html>—>body>—>div的顺序进行传播。

第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。

第三阶段：“冒泡阶段”（bubbling phase），事件冒泡是由IE开发团队提出来的，IE在处理上述事件时候，是由事件开始最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到根节点。这就是事件冒泡。当用户点击了div元素，click事件将按照div—>body>—>html>—>document的顺序进行传播。

取消冒泡兼容性写法

当需要停止冒泡行为时，可以使用

function canclebubble(event){
       var event = event||window.event;        //兼容火狐
      if(event.stopPropagation){
        event.stopPropagation();            //支持W3C的stopPropagation()方法
    }else{
        event.cancaleBubble==true;          //IE的方式
    }
}   

阻止默认行为兼容性写法

当需要阻止默认行为时，可以使用：

function stopevent(event){
    var event = event||window.event;        //兼容火狐
    if(event.preventDefault){
        event.preventDefault();             //阻止默认浏览器动作(W3C)
    }else{
        event.returnValue==false;           //IE中阻止函数器默认动作的方式
    }
}   

事件委托

事实上，操作系统给浏览器分配的资源会比其他桌面应用少，主要是怕黑客利用网页应用进行大量的计算，导致计算机的资源被过多占用而down机等其他原因。JavaScript影响网页应用性能有很多方面，如：每个函数都是对象，都会占用内存；内存中的对象越多，性能越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数越多，就会造成越长的页面交互就绪时间。所以多个事件处理程序过多就会降低事件的性能，解决这种问题的方案就是事件委托。事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类的所有事件。

参考原文：https://blog.csdn.net/zhangwx6/article/details/62435259
谢谢观看~~~