请解释什么是事件代理

简介: 请解释什么是事件代理

事件代理

事件代理:就是把一个元素的响应事件的函数委托给另一个元素

js的事件流会经过三个阶段:捕获阶段->目标阶段->冒泡阶段,而事件委托就是在冒泡阶段完成。

事件委托

会把一个或一组元素的事件委托到它的父级或者更外层元素上,真正绑定事件的是外层元素,而不是目标元素

当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上执行函数

适合事件委托的事件有: click , mousedown , mouseup , keydown , keyup , keypress 从上⾯应⽤场景中。

事件委托存在两⼤优点:

减少整个⻚⾯所需的内存,提升整体性能

动态绑定,减少重复⼯作

但是使⽤事件委托也是存在局限性:

focus 、 blur 这些事件没有事件冒泡机制,所以⽆法进⾏委托绑定事件

mousemove 、 mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位, 对性能消耗⾼,因此也是不适合于事件委托的

如果把所有事件都⽤事件代理,可能会出现事件误判,即本不该被触发的事件被绑定上了事件。


相关文章
|
6月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
46 1
|
6月前
|
JavaScript
如何写事件冒泡和事件捕捉?
如何写事件冒泡和事件捕捉?
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
47 2
|
11天前
|
JavaScript 前端开发
事件冒泡和事件捕获的原理和区别
【10月更文挑战第15天】事件冒泡和事件捕获的原理和区别
|
2月前
|
JavaScript 容器
解释一下事件委托的工作原理
【9月更文挑战第6天】解释一下事件委托的工作原理
21 7
|
6月前
|
JavaScript 前端开发
js开发:请解释什么是事件委托(event delegation),并给出一个示例。
事件委托是JavaScript中优化事件处理的技术,通过绑定事件处理器到共享的父元素,利用事件冒泡机制来处理子元素的事件。这种方法能提升性能、简化代码并降低内存消耗。示例展示了如何在父元素上监听`click`事件,然后通过`event.target`识别触发事件的具体子元素(如`<li>`),实现对动态生成列表项的点击事件处理。
49 1
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
44 0
|
JavaScript 前端开发 UED
js事件的作用和用法
js事件的作用和用法
110 0
|
JavaScript
简述事件委托
简述事件委托
|
JavaScript 前端开发
JavaScript事件捕获与冒泡+案例分析
JavaScript事件捕获与冒泡+案例分析
233 0
JavaScript事件捕获与冒泡+案例分析