事件委托代理 - 好学星城学习论坛

page contents

轩辕小不懂发布于 2021-12-23 13:36

阅读 508

收藏 0

答案 1

分类：WEB前端开发

js

2719

Nen 2021-12-23 13:50

- 程序员

在构建应用程序时，有时需要将事件绑定到页面上的按钮、文本或图像，以便在用户与元素交互

如果我们以一个简单的待办事项列表为例，面试官可能会告诉你，当用户点击列表中的一个列表

这个功能，假设有如下 HTML 代码:

Walk the dog
Pay bills
Make dinner
Code for one hour
你可能想要做如下操作来将事件绑定到元素:
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('todo-app');
let itimes = app.getElementsByClassName('item');
for (let item of items) {
item.addEventListener('click', function(){
alert('you clicked on item: ' + item.innerHTML);
})
}
})
虽然这在技术上是可行的，但问题是要将事件分别绑定到每个项。这对于目前 4 个元素来说，没
10,000 项(他们可能有很多事情要做)怎么办?然后，函数将创建 10,000 个独立的事件侦听器，并
效率非常低下。
在面试中，最好先问面试官用户可以输入的最大元素数量是多少。例如，如果它不超过 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)
}
})
})

评论 (0)

1 关注

提出于 2021-12-23 13:36

全部

508 阅读

508 阅读

508 阅读

508 阅读

508 阅读

508 阅读