Home

JavaScript 中一个重要的方法就是事件委托（又叫事件代理）。事件委托是指将事件侦听器添加到一个父级元素上，这样就只用添加一次事件侦听器，可以避免向 （父级元素内）很多特定的 DOM 节点添加多个事件侦听器，减少了内存消耗，从而优化程序性能。而这个添加在父元素上的事件侦听器通过事件冒泡的事件流机制以分析查找子元素的匹配项。事件委托的概念解释并不复杂，但很多人不明事件委托到底是如何的工作，本文就来解释一下事件委托的工作原理。

事件委托的适用场景

在了解完事件委托的概念后，接下来我们要了解一下事件委托的适用场景。举例，假设有一个 UL 带有多个子元素的父元素：

<ul id="list" class="list">
  <li id="item-1" class="item">Item 1</li>
  <li id="item-2" class="item">Item 2</li>
  <li id="item-3" class="item">Item 3</li>
  <li id="item-4" class="item">Item 4</li>
  <li id="item-5" class="item">Item 5</li>
  <li id="item-6" class="item">Item 6</li>
</ul>

假设单击每个子元素时需要发生一些事情。通常的做法，可以为每个单独的 LI 元素添加一个单独的事件侦听器，但是如果 LI 元素会频繁地动态添加和删除怎么办？尤其是当添加和删除代码位于应用程序中的不同位置时，这时候添加和删​​除事件侦听器将是一场噩梦。

像这种场景：父元素是固定的，而其中的字元素会动态增加或者删除。这个时候就适合使用事件委托，为父元素（UL）添加事件侦听器，通过事件冒泡事件流机制，父元素可以通过 event.target 监测分析出子元素的匹配项。

当然，事件委托也是有一定局限性的。比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托。而 mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。