element.addEventListener(event,function,useCapture)addEventListener有三个参数，一般人一般只用两个参数。第一个参数event指定事件名称。第二个参数function指定事件触发时执行的函数。第三个参数useCapture，true——事件处理器在捕获阶段执行；false-默认值。事件处理程序在冒泡阶段执行事件捕获过程和冒泡过程，如上图所示，传递方式分别为自上而下和自下而上。可以根据图写一个demo来验证这个问题。addEventListener的第三个参数设置为true。level-1是div标签，level-2是p标签，level-3是span标签绑定事件。测试代码如下function(e){console.log("windowcapture",e.target.nodeName,e.currentTarget.nodeName);},true);levelOne.addEventListener("click",function(e){console.log("levelOne捕获",e.target.nodeName,e.currentTarget.nodeName);},true);levelTwo.addEventListener("click",function(e){console.log("levelTwoCapture",e.target.nodeName,e.currentTarget.nodeName);},true);levelThree.addEventListener("click",function(e){console.log("levelThreeCapture",e.target.nodeName,e.currentTarget.nodeName);},true);其中e.target.nodeName指的是当前点击的元素,e.currentTarget.nodeName是元素console.log("levelThreecapture",e.target.nodeName,e.currentTarget.nodeName);当点击最里面的SPAN标签时，第一个捕获的打印如下是window，输出的e.target.nodeName是SPAN，window没有label属性，e.currentTarget.nodeName是undefined，levelOne到levelThree以下被捕获依次类推，e.target.nodeName输出的是被点击的SPAN标签，也就是大小，e.currentTarget.nodeName是绑定监听事件的元素。可以看出，在捕获阶段，冒泡事件代码是自上而下传递的。将第三个参数更改为false。当点击最里面的SPAN标签时，打印顺序如下当点击levelTwo时，此时最里面的SPAN标签没有捕捉到冒泡事件。stopPropagationstopPropagation()方法可防止传播正在调用的同一事件。当有需求，希望事件停止传播或有额外操作时，可以在事件捕获阶段进行拦截。比如点击最里面的span标签，如果我在levelOne拦截事件，事件就不会继续传levelOne.addEventListener("click",function(e){e.stopPropagation()console.log("levelOne捕获",e.target.nodeName,e.currentTarget.nodeName);},true);打印如下preventDefaultpreventDefault()防止默认行为是内层span标签有a标签，链接用于跳转到百度首页。添加防止默认行为的代码后aHref.addEventListener("click",function(e){e.preventDefault();});点击a标签，控制台只打印捕获和冒泡事件的打印
