17、JavaScript 性能优化与远程脚本技术

JavaScript 性能优化与远程脚本技术

1. 事件委托（Event Delegation）

事件委托模式利用了事件冒泡的特性，能够减少附加到各个独立节点上的事件监听器数量。例如，在一个 <div> 元素中有 10 个按钮，我们可以只给 <div> 元素添加一个事件监听器，而不是给每个按钮都添加一个监听器。

下面是一个包含三个按钮的 <div> 示例：

<div id="click-wrap">
  <button>Click me: 0</button>
  <button>Click me too: 0</button>
  <button>Click me three: 0</button>
</div>

我们不直接给每个按钮添加监听器，而是给 id 为 click-wrap 的 <div> 元素添加一个监听器。使用之前示例中的 myHandler() 函数时，需要做一点小改动，即过滤掉我们不感兴趣的点击事件。在这个例子中，我们只关注按钮的点击事件，因此可以忽略 <div> 内的其他点击事件。

修改后的 myHandler() 函数如下：