什么是事件代理?什么事件委托?

事件代理:把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务

事件委托就是利用事件冒泡,只指定一个事件处理程序,管理当前绑定下的所有元素的事件。

// 获取父元素  
var parentElement = document.getElementById('parent');  
  
// 绑定事件到父元素上  
parentElement.addEventListener('click', function(event) {  
  // 判断是否是目标元素被点击  
  if (event.target.tagName === 'BUTTON') {  
    // 处理目标元素的点击事件  
    console.log('Button clicked!');  
  }  
});

在上面的代码中,我们将事件处理程序绑定到了ID为parent的元素上,而不是绑定到每个子元素上。当子元素被点击时,事件冒泡到父元素上,并触发事件处理程序。在事件处理程序中,我们通过event.target属性获取被点击的元素,并判断是否是目标元素(这里为按钮元素)。如果是目标元素,则执行相应的处理逻辑。

通过这种方式,我们可以减少事件处理程序的绑定数量,提高代码的复用性和性能。同时,事件代理/委托也可以方便地处理动态添加的子元素,因为这些子元素的事件也会冒泡到父元素上,并触发相应的事件处理程序。

相关推荐
Dread_lxy几秒前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
娅娅梨6 分钟前
C++ 错题本--not found for architecture x86_64 问题
开发语言·c++
汤米粥12 分钟前
小皮PHP连接数据库提示could not find driver
开发语言·php
冰淇淋烤布蕾15 分钟前
EasyExcel使用
java·开发语言·excel
拾荒的小海螺21 分钟前
JAVA:探索 EasyExcel 的技术指南
java·开发语言
涔溪44 分钟前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
马剑威(威哥爱编程)1 小时前
哇喔!20种单例模式的实现与变异总结
java·开发语言·单例模式
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
白-胖-子1 小时前
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-统计数字
开发语言·c++·算法·蓝桥杯·等考·13级
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript