求star

一、 事件处理的三个阶段#

TIP

• 捕获阶段:
  • 当我们在DOM树的某个节点发生了一些操作(例如单击),就会有一个事件发射出去。这个事件从Window发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段(Capture Phase)。【所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路 线返回 Window。】
• 目标阶段：
  • 当事件不断的传递直到目标节点的时候 ，最终在目标节点上触发这个事件，就是目标阶段
• 冒泡阶段：
  • 事件冒泡即为事件开始时，由最具体的元素接收(也就是事件发生所在的节点)，然后逐级传播到较为不具体的节点（事件绑定就是利用的事件冒泡的原理）

二、事件冒泡#

2.1 事件冒泡的作用#

TIP

• 事件冒泡允许多个操作被几种处理(把事件处理器添加到一个父级元素上，避免添加在多个子级元素)，它还可以让你在对象层的不同级别捕获事件
• 应用场景： 想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了

2.2 如何阻止事件冒泡#

TIP

• event.stopPropagation()
• return false
• event.preventDefault

三、什么是事件代理#

TIP

事件代理(Event Delegation)也称事件委托

事件代理把原本需要绑定在子元素的事件委托给父元素，让父元素担当事件的监听的职务

事件代理的原理是DOM元素的事件冒泡

事件委托的优点：

• 可以大量节省内存占用，减少事件注册
• 可以实现当新增子对象时无需在此对齐绑定(动态绑定事件)