js事件委托

参考链接：http://www.css88.com/archives/7059

也叫事件委派，时间代理

当构建应用程序时，有时你需要将事件监听器绑定到页面上的按钮，文本或图像上，以便在用户与元素交互时执行某些操作。

如果我们以一个简单的待办事项列表为例，面试官可能会告诉你，他们希望在用户单击其中一个列表项时需要执行某些操作。 他们希望你用 JavaScript 实现这个功能，假设HTML代码如下：

1. <ul id="todo-app">
2. <li class="item">Walk the dog</li>
3. <li class="item">Pay bills</li>
4. <li class="item">Make dinner</li>
5. <li class="item">Code for one hour</li>
6. </ul>

你可能会想像下面这样在元素绑定事件监听器：

1. document.addEventListener('DOMContentLoaded', function() {
2. let app = document.getElementById('todo-app');
3. let items = app.getElementsByClassName('item');
4. // 将事件侦听器绑定到每个列表项
5. for (let item of items) {
6. item.addEventListener('click', function() {
7. alert('you clicked on item: ' + item.innerHTML);
8. });
9. }
10. });

虽然这个实现了功能，问题是您要单独将事件侦听器绑定到每个列表项。这是4个元素，没什么大问题，但如果有人在他们的待办事项列表中添加了10,000个事项（他们可能有很多事情要做）怎么办？然后你的函数将创建 10,000 个独立的事件监听器，并将每个事件监听器绑定到 DOM 。这样代码执行的效率非常低下。

在面试中，最好首先询问面试官用户可以输入事项的最大数量是多少。如果它永远不会超过 10 个，上面的代码将工作正常。但是，如果用户可以输入的事项数量没有限制，那么你应该使用一个更高效的解决方案。

如果你的应用程序最终可能有几百个事件监听器，更高效的解决方案是将一个事件侦听器实际绑定到整个容器上，然后在实际单击时可以访问每个确切元素。这被称为事件委托，并且它每个元素单独绑定事件处理程序更高效。

1. document.addEventListener('DOMContentLoaded', function() {
2. let app = document.getElementById('todo-app');
3. // 事件侦听器绑定到整个容器上
4. app.addEventListener('click', function(e) {
5. if (e.target && e.target.nodeName === 'LI') {
6. let item = e.target;
7. alert('you clicked on item: ' + item.innerHTML);
8. }
9. });
10. });