事件冒泡（阻止冒泡）和事件捕捉（阻止捕获）

原理 ：

DOM事件流（event  flow ）：

存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件冒泡(event  capturing） ：

当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

事件捕获（event  capturing）：

当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡

------------------------------------------------------------------------------------------------------------------

   

   

   

   

       

           

111

       

   

------------------------------------------------------------------------------------------------------------------

这是事件冒泡，一共会弹出三次

第一个会弹出  a

第二个会弹出  b

第三个会弹出  c

//阻止事件冒泡

event.stopPropagation()

阻止事件冒泡

------------------------------------------------------------------------------------------------------------------

   

   

   

   

       

           

111

       

   

------------------------------------------------------------------------------------------------------------------

这样就可以阻止事件冒泡

会弹出两次

第一个会弹出  a

第二个会弹出  b

阻止了 c 的弹出

事件捕获

------------------------------------------------------------------------------------------------------------------

   

   

   

   

       

           

111

       

   

------------------------------------------------------------------------------------------------------------------

这是事件捕捉，一共会弹出三次

第一个会弹出  c

第二个会弹出  b

第三个会弹出  a

第三个值换成false，就会变成事件冒泡 （如上）

如果true和false共存的话，就会先执行true后执行false

阻止事件捕获

------------------------------------------------------------------------------------------------------------------

   

   

   

   

       

           

111

       

   

------------------------------------------------------------------------------------------------------------------

这样就可以阻止事件捕获

会弹出两次

第一个会弹出  c

第二个会弹出  b

阻止了 a 的弹出

作者：_Miss_Chen

链接：https://www.jianshu.com/p/2b4a8a6507f1

来源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。