【JAVAScript】【4】利用事件委托简化点击事件（包含箭头函数，target）

本文链接：https://blog.youkuaiyun.com/weixin_51612770/article/details/124829894

本文介绍了JavaScript中的事件委托技术，如何利用它来简化点击事件处理，减少重复代码。同时，讲解了箭头函数的使用，包括其语法特性、适用场景和与传统函数的区别。此外，还详细阐述了Element.target属性及其在事件处理中的作用，以及在父子元素事件处理中的区别。通过一个实际例子展示了如何将多个按钮的点击事件委托给父元素处理，从而提高代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JAVASCript利用事件委托简化点击事件

当写多个点击事件时我总是会添加很多监听函数，但是利用事件委托后仅需添加父元素的监听函数，在利用冒泡就可以为每个子元素添加监听函数，大大简化了程序

前言

以下是围绕事件委托（事件代理）的一个切换案例，同时补充箭头函数和Element.target

一、事件委托

JavaScript中常用绑定事件的常用技巧，“事件委托”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

但注意：使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。

二、箭头函数

箭头函数是ES6新增用于定义函数表达式的函数
首先说明：箭头函数不能使用argument、super和new.target，也不能用作构造函数，没有prototype属性（下节讲）

let arrowSum = (a,b) =>{
   
	return a + b;
}
//等价于
let functionExpressionSum = funtion(a,b){
   	
	return a + b;
}

如果只有一个参数可以不使用括号