23、DOM事件代理：冒泡与捕获

涉及面试题：事件的触发过程是怎么样的？知道什么是事件代理嘛？

23.1 事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

<div id="outer">
    <p id="inner">Click me!</p>
</div>

上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个click的处理函数，那么我们怎么才能知道哪一个函数会首先被触发呢？
为了解决这个问题微软和网景提出了两种几乎完全相反的概念。

1. 事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。
也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

2. 事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

3. addEventListener注册事件

网景 和 微软 曾经的战争还是比较火热的，当时， 网景主张捕获方式，微软主张冒泡方式。后来 w3c 采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。

• addEventListener的第三个参数就是为冒泡和捕获准备的.
• addEventListener有三个参数：
• element.addEventListener(event, function, useCapture)

• event：必需。描述事件名称的字符串。
• function：必需。描述了事件触发后执行的函数。
• useCapture：可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
  可能值：
  true - 事件句柄在捕获阶段执行
  false- 默认。事件句柄在冒泡阶段执行

一般来说，如果我们只希望事件只触发在目标上，这时候可以使用 stopPropagation来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

//stopImmediatePropagation同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。
node.addEventListener(
  'click',
  event => {
    event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

23.2 事件代理

如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上

<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<script>
  let ul = document.querySelector('#ul')
  ul.addEventListener('click', (event) => {
	console.log(event.target);
  })

事件代理的方式相较于直接给目标注册事件来说，有以下优点：

• 节省内存
• 不需要给子节点注销事件