语法
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