问题一:事件委托代理
在构建应用程序时,有时需要将时间绑定到页面的按钮、文本或图像,以便用户在与元素交互的时候执行某些操作。
下面以一个简单的待办事项为列,当用户点击列表中的某一个列表项的时候执行某些操作
有如下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 times = app.getElementsByClassName('item');
for (let item of items) {
item.addEventListener('click', function(){
alert('you clicked on item: ' + item.innerHTML);
})
}
})
虽然这在技术上是可行的,但问题是要将事件分别绑定到每个项。这对于目前 4
个元素来说,没什么大问题,但是如果在待办事项列表中添加了 10,000
项(他们可能有很多事情要做)怎么办?然后,函数将创建 10,000 个独立的事件侦听器,并将每个事件监听器绑定到 DOM ,这样代码执行的效率非常低下。
如果你的应用程序最终可能有数百个事件侦听器,那么更有效的解决方案是将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项, 这称为 事件委托,它比附加单独的事件处理程序更有效。
下面是事件委托的代码:
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)
}
})
})