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

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

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

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

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

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

相关推荐
@小博的博客5 分钟前
C++初阶学习第十三弹——容器适配器和优先级队列的概念
开发语言·数据结构·c++·学习
Dola_Pan8 分钟前
C语言:函数指针精讲
c语言·开发语言
尘浮生9 分钟前
Java项目实战II基于SpringBoot的共享单车管理系统开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序
凤枭香21 分钟前
Python Scikit-learn简介
开发语言·python·机器学习·scikit-learn
ThetaarSofVenice25 分钟前
Java从入门到放弃 之 泛型
java·开发语言
WHabcwu39 分钟前
统⼀异常处理
java·开发语言
Mr__vantasy42 分钟前
数据结构(初阶6)---二叉树(遍历——递归的艺术)(详解)
c语言·开发语言·数据结构·算法·leetcode
寒雒44 分钟前
【Python】实战:实现GUI登录界面
开发语言·前端·python
山山而川粤1 小时前
废品买卖回收管理系统|Java|SSM|Vue| 前后端分离
java·开发语言·后端·学习·mysql
独上归州1 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense