#a{宽度：300px；高度：300px；背景：粉色；}#b{宽度：200px；高度：200px；背景：蓝色；}#c{宽度：100px；高度：100px；背景：黄色；}vara=document.getElementById("a"),b=document.getElementById("b"),c=document.getElementById("c");c.addEventListener("click",function(event){console.log("c1");//注意不传第三个参数infalse，因为默认传入false//，代表冒泡阶段调用，个人认为会在target阶段调用});c.addEventListener("click",function(event){console.log("c2");},true);b.addEventListener("click",function(event){console.log("b");},true);a.addEventListener("click",function(event){console.log("a1");},true);a.addEventListener("click",function(event){console.log("a2")});a.addEventListener("click",function(event){console.log("a3");event.stopImmediatePropagation();},true);a.addEventListener("click",function(event){console.log("a4");},true);整个html页面就是下面三个小框，那么现在有三个问题：如果点击c或者b，输出是什么？(答案是a1,a3)stopImmediatePropagation包含了stopPropagation的功能，阻止了事件传播（捕获或冒泡），同时也阻止了后面绑定在元素上的事件处理器被调用，所以a4没有输出。因为拦截了事件捕获，b、c上的事件自然不会触发，所以b、c1、c2不会输出，更不会冒泡，所以a2不会输出。如果单击a，输出是什么？（答案是a1,a2,a3）不应该是a1,a3,a2吗？有的同学会说：“a1和a3是handler，在捕获阶段调用，a2在冒泡阶段调用”。True，false，但是现在事件流处于目标阶段，不是冒泡阶段，也不是捕获阶段，调用事件处理器的顺序就是注册的顺序。无论您指定true还是false。也就是说，现在点击的是盒子a本身，处于事件流的目标状态，既不是冒泡也不是捕获。（需要注意的是，此时的eventPhase为2，表示事件流处于目标阶段，当点击a时，先从文档中抓取，然后逐步寻找元素时a找到了，target和currentTarget是一致的，所以判断是结束了，不需要捕获了，这时候会按顺序执行预定的事件处理函数，然后继续执行后冒泡...）如果event.stopImmediatePropagation被注释掉，点击c，会输出什么？（答案是a1,a3,a4,b,c1,c2,a2）如果同一个事件处理器（指针相同，比如用handler保存的事件处理器），用addEventListener或者attachEvent绑定多次，如果third如果参数相同，则只调用一次。当然，如果第三个参数其中一个设置为true，另一个设置为false，就会被调用两次。这里给监听函数的回调赋了一个匿名函数，所以实际上每一个处理函数都会被调用。需要注意的是，如果你还不明白为什么在c上先触发c1，再触发c2，那么你需要看第二个问题描述的内容。以上就是本文的内容。文章最后一个例子是在网上某处看到的，具体出处忘记了。如果有人找到来源，请告诉我。参考资料：《JavaScript高级程序设计》