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

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

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

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

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

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

相关推荐
会开花的二叉树1 分钟前
继承与组合:C++面向对象的核心
java·开发语言·c++
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
长河2 小时前
Java开发者LLM实战——LangChain4j最新版教学知识库实战
java·开发语言
Cyan_RA92 小时前
SpringMVC @RequestMapping的使用演示和细节 详解
java·开发语言·后端·spring·mvc·ssm·springmvc
再见晴天*_*5 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08276 小时前
Qt程序单独运行报错问题
开发语言·qt
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css