JavaScript中三个常见问题（1）

问题一：事件代理

创建应用时，有时需要给页面中的按钮，文字，或图片添加事件监听器，当客户与这些元素交互时触发某些操作。

我们现在以一个简单的代办事项列表为例，有人告诉你，他们希望在用户点击列表中某一项时触发一个动作。并让你用纯JS根据下面的HTML代码实现这个功能：

<ul id="todo-app">    <li class="item">Walk the dog</li>    <li class="item">Pay bills</li>    <li class="item">Make dinner</li>    <li class="item">Code for one hour</li></ul>   

这时你会怎么办呢？有可能会像下面的代码一样给元素添加事件监听器：

            document.addEventListener('DOMContentLoaded',function(){                let app=document.getElementById('todo-app');                let items=app.getElementsByClassName('item');//              给每个列表项添加事件监听器                for(let item of items){                    item.addEventListener('click',function(){                        alert('you clicked on item:'+item.innerHTML);                    })                }            })

当然上面的代码能完成要求，问题是每个列表项都会加上一个事件监听器。当列表只有4项时没有问题，但如果有人给代办事项列表新增了10000个事项呢？
那时函数会创建10000个事件监听器，然后把它们都添加到DOM上。这样效率非常低。
这时首先你可以问你一下最多可以添加多少个代办事项。如果永远不会超过10个，那上面的代码运行起来就没有问题。但如果用户输入代办事项的数量没有上限，那你就得换一个更高效的解决方法了。

如果应用有上百个事件监听器，更高效的解决方案是给最外层的容器添加一个事件监听器，当用户真正点击的时候再去获取实际被点击的代办事项。这被称为事件代理，这比给每个代办事项都单独添加事件监听器更高效。
下面是事件代理的代码：

            document.addEventListener('DOMContentLoaded',function(){                let app=document.getElementById('todo-app');//              给容器添加事件监听器                app.addEventListener('click',function(e){                    if(e.target&&e.target.nodeName==='LI'){                        let item=e.target;                        alert('you clicked on item:'+item.innerHTML);                    }                })            })