JavaScript 事件冒泡 捕获

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

// EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器（Element、document 和 window 是最常见的事件目标，但是其他对象也可以是事件目标， 比如 XMLHttpRequest 等）

target.addEventListener(type,listener[, options]);
target.addEventListener(type,listener[, useCapture]);
target.addEventListener(type,listener[, useCapture,wantsUntrusted]);

//type 表示监听事件类型的字符串
//listener 当所监听的事件类触发时，会接收到一个事件通知（实现了Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或一个函数
// useCapture true/false事件是否冒泡

<div id="catch">
<div id="pao">
click me
</div>
</div>

var btn=document.getElementById('pao');

btn.addEventListener('click',function () {
alert('冒泡')
},false);

btn.addEventListener('click',function () {
alert('捕获')
},true);

点击外出“div” 的catch，先捕获后冒泡

    var btn=document.getElementById('pao');

btn.addEventListener('click',function () {
alert('冒泡')
},false);

btn.addEventListener('click',function () {
alert('捕获')
},true);

先注册先冒泡，所以先弹出冒泡，谁先注册弹出谁

内层外出同时捕获

var btn=document.getElementById('catch');
var btn1=document.getElementById('pao');

btn1.addEventListener('click',function () {
alert('捕获  pao')
},true);

btn.addEventListener('click',function () {
alert('捕获 catch')
},true);

先捕获外出catch，在捕获内层pao

内层外层同事冒泡

var btn=document.getElementById('catch');
var btn1=document.getElementById('pao');

btn1.addEventListener('click',function () {
alert('冒泡  pao')
},false);

btn.addEventListener('click',function () {
alert('冒泡 catch')
},false);

内层先冒泡，先pao冒泡，在catch 冒泡