弄懂事件委托

简介: 弄懂事件委托

事件委托,也叫事件委派,事件代理。

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

假设我们现在有一个无序列表:

<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>

我们需要在 <li>上绑定点击事件,我们可能会这样操作:

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个元素,没什么大问题,但如果列表中有10,000个事项,怎么办?这个函数将会创建10,000个独立的事件监听器,并将每个事件监听器绑定到 DOM 。这样代码执行的效率非常低下。

更高效的解决方案是将一个事件侦听器实际绑定到父容器 <ul>上,然后在实际单击时可以访问每个确切元素。这被称为事件委托,并且它比每个元素单独绑定事件的处理程序更高效。

那么上面的代码可以改变为:

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);
  }
});

目录
相关文章
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
49 2
|
13天前
|
JavaScript 前端开发 UED
事件冒泡的优点
【10月更文挑战第29天】事件冒泡在简化事件绑定与管理、提高代码的可维护性和可扩展性、提升性能和内存效率以及实现更灵活的交互设计等方面都具有显著的优点。在实际的JavaScript开发中,合理地运用事件冒泡机制能够有效地提高开发效率,优化页面性能,为用户创造更好的交互体验。
|
28天前
|
JavaScript 前端开发
事件冒泡和事件捕获的原理和区别
【10月更文挑战第15天】事件冒泡和事件捕获的原理和区别
|
2月前
|
JavaScript 容器
解释一下事件委托的工作原理
【9月更文挑战第6天】解释一下事件委托的工作原理
29 7
|
2月前
|
JavaScript 前端开发 开发者
事件委托的优缺点分别是什么
【9月更文挑战第6天】事件委托的优缺点分别是什么
72 4
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
44 0
|
6月前
|
前端开发 JavaScript 容器
前端中的事件委托
前端中的事件委托
75 0
|
前端开发 JavaScript
了解事件冒泡:理解前端开发中的重要概念
了解事件冒泡:理解前端开发中的重要概念
101 0
|
JavaScript 前端开发 C++
JavaScript事件委托与事件流+牛客例题
JavaScript事件委托与事件流+牛客例题
61 0
|
前端开发 JavaScript 容器
前端小知识:事件委托及其应用
本文通过实际案例介绍前端中的事件委托及其应用。
85 0