DOM事件和事件委托

事件的本质是程序各个组成部分之间的一种通信方式。

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口。 接口主要提供三个实例方法。

1. addEventListener 添加事件的监听函数
2. removeEventListener 移除事件监听函数
3. dispatchEvent 触发事件

事件的传播

事件传播有三个阶段

• 第一阶段。从window对象传导到目标节点（上层传到底层），称为捕获阶段（capture phase）。
• 第二阶段：在目标节点上触发，称为目标阶段（target phase）。
• 第三阶段： 目标节点传导回window对象（从底层传回上层），称为冒泡阶段（bubbling phase）。

<div>
  <p>点击</p>
</div>
<script>
var phases = {
  1: 'capture',
  2: 'target',
  3: 'bubble'
};

var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);

function callback(event) {
  var tag = event.currentTarget.tagName;
  var phase = phases[event.eventPhase];
  console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}
<script/>

// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'

注意： 浏览器总是假定 click 事件的目标节点，就是点击位置嵌套最深的那个节点（本例是<div>节点里面的<p>节点）。所以，<p>节点的捕获阶段和冒泡阶段，都会显示为target阶段。并且addEventListener的第三个参数不同，表示绑定了两个不同的监听函数

添加事件监听函数 EventTarget.addEventListener()

用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。当多个同一事件被绑定到同一个节点时，只会生效一个。

target.addEventListener(type, fn[, useCapture]);

• type: 事件名称，大小写敏感

• fn： 需要绑定的函数

• useCapture： 是否在捕获阶段调用绑定的函数,默认为false.还可以是一个属性配置对象。该对象有以下属性。

  • capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
  • once：布尔值，表示监听函数是否只触发一次，然后就自动移除。 // 更优雅的写移除，不然就得在 fn 中写removeEventListener
  • passive：布尔值，表示监听函数不会调用事件的 preventDefault 方法。如果监听函数调用了，浏览器将忽略这个要求，并在监控台输出一行警告。

function hello() {
  console.log('Hello world');
}

var button = document.getElementById('btn');
button.addEventListener('click', hello, false); 

button.addEventListener('click', hello, {once:true} ); // 一次性监听事件

移除事件监听函数 EventTarget.removeEventListener()

EventTarget.removeEventListener方法用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。使用方法跟addEventListener一样

注意，removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一个元素节点，也就是说只可以把add改为remove,否则无效。

div.addEventListener('click', function (e) {}, false);
div.removeEventListener('click', function (e) {}, false);

触发事件 EventTarget.dispatchEvent()

EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。可以dan

button1.addEventListener('click', ()=>{
  const event = new CustomEvent("outInfo", {"detail":{name:'Jack', age: 18}})
  button1.dispatchEvent(event)
})

button1.addEventListener('outInfo', (e)=>{
  console.log('outInfo')
  console.log(e)
})

事件代理 Event Delegation

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

取消事件传播

// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, true);

// 事件冒泡到 p 元素后，就不再向上冒泡了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, false);

上面代码中，stopPropagation方法分别在捕获阶段和冒泡阶段，阻止了事件的传播。

但是，stopPropagation方法只会阻止事件的传播，不会阻止该事件触发<p>节点的其他click事件的监听函数。也就是说，不是彻底取消click事件。

p.addEventListener('click', function (event) {
  event.stopPropagation();
  console.log(1);
});

p.addEventListener('click', function(event) {
  // 会触发
  console.log(2);
});
//1 
//2

如果想要彻底阻止这个事件的传播，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。

p.addEventListener('click', function (event) {
  event.stopImmediatePropagation();
  console.log(1);
});

p.addEventListener('click', function(event) {
  // 不会被触发
  console.log(2);
});