17、JavaScript 高级技术：事件委托、长脚本处理与远程脚本通信

JavaScript 高级技术：事件委托、长脚本处理与远程脚本通信

1. 事件委托

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

1.1 示例

假设有如下 HTML 结构：

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

我们可以给 click-wrap 这个 div 添加一个事件监听器，而不是给每个按钮添加。下面是 myHandler() 函数的修改部分：

// ...
// get event and source element
e = e || window.event;
src = e.target || e.srcElement;
if (src.nodeName.toLowerCase() !== "button") {
    return;
}
// ...
</