问题一:事件代理
创建应用时,有时需要给页面中的按钮,文字,或图片添加事件监听器,当客户与这些元素交互时触发某些操作。
我们现在以一个简单的代办事项列表为例,有人告诉你,他们希望在用户点击列表中某一项时触发一个动作。并让你用纯 JS 根据下面的 html 代码实现这个功能:
这时你会怎么办呢?有可能会像下面的代码一样给元素添加事件监听器:
- 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); } }) })
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-09/18354824.html