事件委托(event delegation) 或叫 事件代理

  • 比较好的介绍文章：

    关于事件委托的整理 ，另附bind,live,delegate,on区别：https://www.cnblogs.com/MagicZhao123/p/5980957.html

    js中的事件委托或是事件代理详解：https://www.cnblogs.com/liugang-vip/p/5616484.html

  • 使用委托的优点：原本需要给多个元素添加事件的现在只需要给他们的父元素添加事件，提高性能，提高可读性。
  • 提示：使用事件委托时，如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

原文地址：https://www.cnblogs.com/cag2050/p/9689101.html

时间： 2024-10-13 16:18:57

事件委托(event delegation) 或叫 事件代理的相关文章

javascript 事件委托 event delegation

事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件监听器,子元素上没有任何事件监听.当子元素被点击时,这个点击事件冒泡到父元素上,然后父元素上绑定的事件监听来分析和处理这是哪个子元素被点击了. 二.例子1:一个ul及几个li: <ul id="parent-list" style="border:1px solid bla

事件委托(event delegation)

事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好! 通过字符串拼接后,并进行DOM插入,不会复制事件,此时需要进行事件委托了!!! 优点 事件委托对于web应用程序的性能有如下几个优点: 1.需要管理的函数变少了 2.占用的内存少了 3.javascript代码和Dom结构之间的关联更少了 4.在改变DOM结构中的innerHTML时,不需要改动事件处理函数 使用方法: 1.给一组元素的父级添加事件(通过冒泡机制) oUl.onclick=function(){}; 2.寻找

Javascript的事件委托和事件处理

随着Ajax和RIA越来越成为主流,Javascript对事件(Event)的支持也得到了越来越多的关注.像雅虎这样的公司正在突破RIA的极限,让web应用程序在浏览器中更有效的运行,就像桌面应用程序一样.雅虎的邮箱应用就是一个很好的例子. 雅虎的一些工程师给我们展示了提高Javascript应用程序性能的技术.其中有提到强大的事件处理架构.提高性能的要旨就是用事件委托(Event Delegation)而非传统的事件处理(Event Handling). 我发现一个问题是,网上大部分的例子是用

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

js的事件委托机制

如今的JavaScript技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

JavaScript 事件委托的技术原理

如今的 JavaScript 技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: 1 2 3 4 5 6 7 8 <

js事件委托（事件代理）

事件委托 js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的. 答案就是event对象记录的事件源,他就是发生事件的子元素: 事件委托的好处? 1.效率高,比如不用for循环 2.js新生成的子元素也不用新其添加事件,程序逻辑比较方便 例子1. 页面有个ul包含着4个li,鼠标移动到li上,li背景变成粉色,移出,背景恢复原色. <!DOCTYPE html> <

事件和委托（Event vs. Delegate）-事件阉割版的Delegate

引言 关于事件和委托的文章看过很多,但总是记不完整.尤其是在给别人讲解的时候总是很零碎,所以在此整理一下,也供大家参考,很请大家不吝赐教. 本文从一个子类如何触发基类的事件(Event),引出事件和委托的共性和区别.再简单分析下背后原因,深层原因也给大家提供了部分参考资料.欢迎大家留言讨论.   问题 "如果我想在子类里触发父类的事件(Event)应该如何实现?"(可以先自己做下或者想下,再继续看您的做法是否也曾有我碰到技术误区)   问题分解为两步: 父类定义了一个事件(Event)

Js中的事件委托/事件代理

什么叫事件委托/事件代理呢 ? JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡: 当事件发生后,这个事件就要开始传播(从里到外或者从外向里),为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上. 例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中. 事件委托: 是利