弄懂事件委托
最编程
2024-08-07 14:57:26
...
事件委托,也叫事件委派,事件代理。
当构建应用程序时,有时需要将事件监听器绑定到页面上的某些元素上,以便在用户与元素交互时执行某些操作。
假设我们现在有一个无序列表:
<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);
}
});
推荐阅读
-
App:templatesNuxt.js 应用程序中生成的事件钩子详解
-
如何在 uniapp 上绑定全局事件总线(引入弹出窗口等自定义全局组件)
-
详细介绍 Nuxt.js 应用程序中的应用程序:解析事件钩子
-
服务器发送事件 (SSE) GPT 场景实施 - 服务器端(后端)
-
模块:Nuxt.js 应用程序中的事件钩子前详解
-
OpenCV 高级图形用户界面(4)获取鼠标滚轮事件增量值的函数 getMouseWheelDelta 的使用--代码示例
-
为 unity 中指定的动画片段添加动画事件,播放动画并获取片段的持续时间。-示例 1
-
JQuery 基本介绍和用法-JQuery 事件
-
Qt --- 系统相关 --- 事件、文件操作、多线程编程、网络编程、多媒体
-
1.随机事件和概率