addEventListener 的事件冒泡

语法

target.addEventListener(type, listener, useCapture);

• target 文档节点、document、window 或 XMLHttpRequest。
• type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
• listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
• useCapture 是否使用捕捉，一般用 false。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。

 

第三参数是包裹层触发问题，事件执行前先判断执行顺序，程序先由外向里扫描注册到各层的事件，如果事件的useCapture参数是true，就立即执行，执行完后继续往里层扫描。false就跳过直接往里层扫描。
扫描完后到达点击触发的那个元素，然后开始由里向外执行未执行的事件

<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
      <div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1"></div>
</div>

eg1:

document.getElementById('id1').addEventListener('click', function(event) { console.log('id1');}, false);

document.getElementById('id2').addEventListener('click', function(event) { console.log('id2');}, false);

点击id2的div结果是: id2， id1

eg2:

document.getElementById('id1').addEventListener('click', function(event) { console.log('id1');}, false);

document.getElementById('id2').addEventListener('click', function(event) { console.log('id2');}, true);

结果是: id2, id1

eg3:

document.getElementById('id1').addEventListener('click', function(event) { console.log('id1');}, true);

document.getElementById('id2').addEventListener('click', function(event) { console.log('id2');}, false);

结果是：id1，id2

eg4:

document.getElementById('id1').addEventListener('click', function(event) { console.log('id1');}, true);

document.getElementById('id2').addEventListener('click', function(event) { console.log('id2');}, true);

结果是：id1，id2