本文共 1380 字，大约阅读时间需要 4 分钟。

事件冒泡：从下至上(是指子元素向父元素传递的过程)，  bool=false冒泡(默认)

事件捕获：从上至下(是指父元素向子元素传递的过程)， bool=true 捕获 一般不会用到

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果。

     优点：1. 使用事件代理的方法少了遍历所有li节点的操作，性能上更加优化；

                2. 针对新创建的元素，直接可以拥有事件，不用再重新绑定。     使用情景： 　　        •为DOM中的很多元素绑定相同事件； 　　        •为DOM中尚不存在的元素绑定事件；

例子：假设一个元素div，它有一个下级元素p。

<div> 　　<p id="button">元素</p> </div> 这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

document.getElementById("button").addEventListener("click",function(){    alert("button");},false);

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

document.getElementById("button").addEventListener("click",function(){    alert("button");},true);

 

addEventListener方法

element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件，第二个参数是触发事件后要执行的函数。

第三个参数是布尔值：

注意：addEventListener() 必须用 removeEventListener() 解除

在W3c中，使用 stopPropagation() 方法来阻止冒泡

document.getElementById("button").addEventListener("click",function(event){    alert("button");    event.stopPropagation();    },false);

使用DOM3级新增事件 stopImmediatePropagation() 方法来阻止事件捕获，另外此方法还可以阻止事件冒泡。

document.getElementById("second").addEventListener("click",function(){    alert("second");    event.stopImmediatePropagation();},true);

 

stopImmediatePropagation() 和 stopPropagation()的区别

后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生。

 

  
       
   
    
    
hello 1
    
    
hello 2
    
    
hello 3
    
    
hello 4