前端小贴士 - 事件委托

一、什么是事件委托？

  通常情况下，注册事件程序有两种方式：

• DOM0级事件处理程序，例如：onclick；
• DOM2级事件处理程序，addEventListener。

  但是当页面中存在大量的事件处理程序时，会造成以下问题：

• 这两种注册事件处理程序的方式都需要先查询具体的元素，而大量的DOM查询操作会影响网站的性能。
• 大量的事件处理程序函数占用大量的内存。

  为了优化上述问题，可以利用事件冒泡的机制，只指定一个事件处理程序，管理某一类型的所有事件，这种事件注册的方式叫做事件委托。

二、简单示例

  在实际的开发过程中，经常会遇到列表的处理，在此之前，你会为每一个列表项注册事件处理程序，现在应该采用事件委托的方式进行优化。

  首先需要为每一个列表项加上标识符，以便在事件冒泡阶段区别是哪一个列表项：

<ul id="js-list">
  <li>
    <button data-id="1">删除</button>
  </li>
  <li>
    <button data-id="2">删除</button>
  </li>
  <li>
    <button data-id="3">删除</button>
  </li>
</ul>
</