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

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

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

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

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

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

相关推荐
刺客_Andy1 分钟前
vue3 第二十九节 (vue3 事件循环之nextTick)
前端·vue.js
Audi_A4L2 分钟前
RxJS的设计原理以及用了哪些设计模式
前端
小鱼冻干3 分钟前
node.js-net模块
前端·node.js
Slow菜鸟10 分钟前
JavaScript与UniApp、Vue、React的关系
javascript·vue.js·uni-app
苦逼的老王11 分钟前
java之uniapp实现门店地图
java·开发语言·uni-app
一条晒干的咸魚17 分钟前
【C#学习笔记03】进制转换与反码、补码、原码
开发语言·笔记·学习·c#
VT.馒头19 分钟前
【力扣】2629. 复合函数——函数组合
前端·javascript·算法·leetcode
程序猿--豪20 分钟前
前端技术百宝箱
javascript·vue.js·react.js·webpack·gitee·css3·html5
程序员buddha20 分钟前
ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统
javascript·css·mysql·php·layui·jquery·html5
╰つ゛木槿21 分钟前
NPM安装与配置全流程详解(2025最新版)
前端·npm·node.js