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

★ 事件触发三阶段

捕获阶段
目标阶段
冒泡阶段

捕获阶段：

事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

目标阶段:

事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

冒泡阶段:

事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点

★ 注册事件 addEventListener

注册事件有三种addEventListener、onclick、attachEvent，其中onclick、attachEvent没有第三个参数，实际上我们无法通过onclick、attachEvent来干预事件的第一阶段和第二阶段，并且很多时候我们只关心事件的第三阶段，即冒泡阶段。

addEventListener三个参数可以是布尔值，也可以是对象

第三个参数是布尔值的时候

true：事件从外到里执行，这种效果叫做事件捕获。
false：事件从里到外执行，这种效果叫事件冒泡。

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 以下会先打印冒泡然后是捕获；因为代码先写的是冒泡，后写的是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

第三个参数是对象的时候

对于对象参数来说，可以使用以下几个属性

capture：布尔值，和 useCapture 作用一样
once：布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
passive：布尔值，表示永远不会调用 preventDefault

★ 事件代理

父节点代理

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

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

优点

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

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

★ 移除事件

beforeDestroy阶段,解绑事件,清除计时器,不移除的话，整个组件的实例都无法被垃圾回收，导致内存泄漏

★ 如何排查内存泄漏问题？

对于js的内存泄漏问题，Chrome提供了Memory 内快照的记录功能为我们分析内存问题提供参考

1.浏览器-事件