一、概念理解： 1、事件：HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如点击事件、鼠标移入/移出事件等。...事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流：冒泡事件流、捕获事件流。 3、DOM 事件模型：捕获、目标、冒泡。 那什么是事件委托呢？...事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。 二、事件委托的优点： 那为什么要使用事件委托？...事件委托有什么好处，以及使用时要注意什么？ 事件委托大概有两个优点： 1、提高网页性能。 2、通过事件委托添加的事件，对后期生成的元素依然有效。 上面提到的第二点如何理解呢？...三、事件委托的使用方法： 使用上面 ul 的例子进行事件委托给每个 li 绑定事件，示例代码： var ul = document.querySelector("ul"); ul.onclick =
今天给自己的知识结构填个坑，再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件，并且还可以提高效率，因为你确实不用给每个DOM节点添加事件监听了。...事件的监听器，是被添加到了它们的父元素上，监听器会分析从新生成的子元素上冒泡上来的事件，并找到是哪个子元素的事件。...id="li-4">li 4 li 5 li 6 那么，当每个子元素被点击的时候，会发生不同的事件...那么这时，你需要把事件监听器放在它们的父容器 ulId 上面。 这时，当子元素被点击的事件，冒泡到父元素Li上的时候，你就可以通过检查事实的target，从而获取真正被点击的节点元素的引用。...现在大部分JS都会使用jQuery等工具库来处理DOM事件，但对于事件委托的背后原理，我们还是要了解的。 浅谈数据结构 - 字典
需要事先为DOM对象指定事件处理程序，导致访问DOM的次数增多，会延迟整个页面的交互就绪时间。 事件委托 对事件处理程序过多的解决方案是使用事件委托。...事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...并不是所有的事件都适合使用事件委托，比较适用的事件是：mouseup、mousedown、click、keyup、keydown和keypress。...虽然mouseover和mouseout也支持事件冒泡，但是如果使用事件委托则处理就比较麻烦，而且需要计算鼠标的位置以及元素的位置（当鼠标从一个元素移到其子节点，或者移出元素都会触发mouseout事件...移除事件处理程序 前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多，会影响页面的性能，除了使用事件委托之外，还可以将一些事件移除。
https://louluan.blog.csdn.net/article/details/24009177 在我的另外一篇文章 解析Javascript事件冒泡机制里的最后...，从冒泡机制的角度谈了一点对Javascript 事件委托的理解。...真正做事情的是乙，即被委托人，而委托人甲 则是把相应的信息传递给被委托人乙，自己本该做的事情交给了乙来做，如下图这个例子： ? 那么在我们javascript 里，什么是事件委托呢？...但是，事件委托也是有缺点的： 如果现在的dom 元素分为很多很多层，对于底层事件的委托，有可能在事件冒泡的过程中，中途被某个节点 终止冒泡了，这样事件就传递不到上层，则委托就会失败了。...jquery 对事件委托的支持 在jQuery里对事件委托的支持，有以下几个函数： ?
事件对象 包含事件相关的信息，如鼠标、时间、触发的DOM对象等 js默认将事件对象封装好，并自动的以参数的形式，传递给事件处理函数的第1个参数，如下： document.getElementsByTagName...("div")[0].onclick = function(e){ e = window.event || e; //兼容IE低版本（事件对象绑定在window的event上） console.log...(e);//这里e就是事件对象 } 事件的属性和方法 type：获取事件类型（click、mouseover等等） target：获取发生的所在元素（在低版本IE下用srcElement属性） stopPropagation...() 阻止事件冒泡（IE用cancelBubble属性为false阻止冒泡） preventDefault() 阻止事件默认行为（IE用returnValue属性为false阻止默认行为） 事件委托 利用...target属性，获取时间发生的所在对象，避免全体子元素加事件，对比如下： var tbs=document.getElementsByTagName("td"); for(var i=0;i
前言 事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。...顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。 事件代理的原理是DOM元素的事件冒泡。...一、事件冒泡 在JavaScript编程中，事件代理（Event Delegation）是一种将事件监听器应用于一个父元素，而不是直接应用于每一个子元素的技术。...此时，可以利用事件委托技术解决这个问题。...事件委托链：避免在多个元素上设置相同类型的事件代理，这可能导致事件处理逻辑混乱。 事件对象：正确使用 event.target 或 event.currentTarget 来区分事件的来源。
事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。...JavaScript事件传播 addEventListener 方法的第三个参数 captureOrOptions： element.addEventListener(eventType, handler...3.事件委托 让我们用事件委托来捕获多个按钮上的点击： 。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。...现在，你可以看到事件委托模式的好处：事件委托仅需要一个事件侦听器，而不必像本文最初那样将侦听器附加到每一个按钮上。
JavaScript事件代理 首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。...当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。...更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。...('click', function(event){ //event事件对象 var target=event.target || event.srcElement; //事件目标...，布尔值false 三：为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。
这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于 Darcy Clarke的JavaScript典型面试问题列表。...详解事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...用document元素来处理按钮的点击行为就是事件委托的一个例子，另一种常见情况是，用ul元素来处理其子元素li的事件。 有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。...使用事件委托能减少监听器数量，在元素的容器上绑定事件意味着只需要一个监听器。这种方法的缺点是,父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。...另一篇值得一读的文章：Event Delegation In JavaScript this在JavaScript中是怎么工作的 this 关键字在JavaScript中的一种常用方法是指代码当前上下文
javascript事件委托是什么 说明 1、事件委托是指目标节点的事件被移动到父节点上进行处理，因为浏览器冒泡的特性，当该事件被目标节点触发时，父节点也会触发它。...所以这个父节点负责监听和处理这个事件。 2、使用事件委托，只需要监听列表项的父节点上的该事件，然后对其进行统一处理。...} const parent = document.getElementById('parent'); parent.addEventListener('click', delegate); 以上就是javascript...事件委托的介绍，希望对大家有所帮助。...更多Javascript学习指路：Javascript 推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。 收藏 | 0点赞 | 0打赏
事件委托也称事件代理，在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。...事件委托的原理 不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多，浏览器内存占用越大，严重影响性能 只操作一次DOM...事件委托实现 dianwo dianwo dianwo dianwo dianwo...image.png 事件委托的优点： 1.减少事件注册，节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。
html> 111 222 333 JAVASCRIPT...这里写图片描述 事件委托 ❝什么是事件委托： ❞ ❝事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。...(不理解冒泡的可以去百度下) ❞ ❝定义：利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。...❞ ❝事件委托的好处： ❞ ❝事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。...❞ ❝使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。
https://blog.csdn.net/FE_dev/article/details/78870583 说明 上次我们说了一些，关于 JavaScript中事件委托的 基础知识，这次我们继续来看...){ console.log('li 被点击了'); } } 上面这段代码，用了事件委托...true 或 false selectorString 是个css选择器字符串 举例： 这是一个div元素 <script type="text/<em>javascript</em>...jQuery中的<em>事件</em><em>委托</em> jQuery中<em>事件</em><em>委托</em>主要是靠on( ) 方法，我们先来看看 on( ) 方法的使用说明 on( ) 方法主要有以下两种形式的用法 用法一 jQueryObject.on...被点击了'); }); 更加详细的关于 JQuery中on( )方法的解释，推荐看这里 jQuery.on() 函数详解 总结 用到 <em>事件</em><em>委托</em>
前言 这两天一直在想如何结合实际案例来结束委托与事件的讲解，下面讲解两个事例，用来加深对委托及事件的理解。 事例一（分页功能） 本场景是用来讲解使用的，具体内容功能需自行填补实现。...用委托加事件来实现分页功能的通用。按上一节讲解中的逻辑处理，分为订阅者和发布者，一样的可以先定义订阅者感兴趣的对象，然后发布者，订阅者。再就是主程序调用。...public event PageActionEventHandler PageAction; //定义保护方法判断委托事件是否为空,传入参数e类型为EventArgs...; } } } 谨记，事件基于委托，为委托提供了一种发布/订阅机制。理解发布订阅机制就会容易多了。一旦理清楚，发现好像也并不是很难的。...总结 委托与事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。 曾经，我们懵懵懂懂地看完了狮子王，知道有个勇敢坚强的小狮子叫辛巴。
事件委托 1. 基本概念 事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。...前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？ 2. 事件传播 事件的传播分为三个阶段：「捕获阶段」、「目标阶段」、「冒泡阶段」。...事件委托的好处 减少内存消耗 试想一下，如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件。...因此，比较好的方法就是把这个点击事件绑定到他的父层，然后在执行事件的时候再去匹配判断目标元素。所以事件委托可以减少大量的内存消耗，节约效率。...如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的。
https://blog.csdn.net/FE_dev/article/details/78821578 说明 这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。...事件委托 是什么 先来看看事件委托的概念 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 事件委托，你叫他 事件代理 也可以，都是一个意思。...事件：JavaScript 侦测到的行为就是事件，比如鼠标点击、某个键盘的键被按下、元素获得焦点。 委托：就是把原来自己做的事，交给别人做。...事件委托 的原理 要说事件委托的原理，我们应该先明白事件冒泡 事件冒泡：从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定在其上的事件。 我们来看段代码 <!...还有 JQuery中的事件委托 又是怎么做的呢？ 看这里 简单说 JavaScript中的事件委托（下）
在JavaScript的开发中，事件处理是构建动态、交互式逻辑的关键。...事件委托和事件代理，作为高效的事件处理策略，不仅优化了性能，还提升了代码的可维护性事件委托与事件代理的基础概念事件委托是将事件处理程序添加到一个父元素上，利用事件冒泡的机制来处理子元素的事件。...事件委托的优势减少内存使用：当有大量子元素需要相同的事件监听时，事件委托可以减少事件监听器的数量，从而减少内存的使用。...更好的事件管理：事件委托可以更容易地实现复杂的事件管理逻辑，如键盘事件、鼠标事件等，特别是在复杂的UI组件中。...事件代理的局限性虽然事件代理和事件委托带来了诸多优势，但也存在一些局限性：性能考虑：尽管事件委托在大多数情况下能提升性能，但在特定场景下，如事件处理逻辑复杂或性能敏感的应用中，直接为每个元素添加事件处理函数可能更为合适
在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...下面是一个事件委托的示例：HTML代码： Item 1 Item 2 Item 3JavaScript...事件委托的优点和适用场景事件委托有以下优点：减少事件处理函数的数量，提高代码的可维护性和性能。可以处理动态添加的元素，无需手动重新绑定事件处理程序。可以统一管理事件处理程序，使代码更加简洁和易于维护。
概念 事件委托也叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...动态绑定： 新生dom节点如果用原来的方式是无法绑定事件的，用委托的方式这方面可以轻松实现，保证父元素存在即可。...原理 利用事件冒泡，而冒泡指的就是事件从向上传递事件，如果事件有相应的函数绑定就会执行其绑定函数。...举例：ul下的li元素有绑定事件，我们通过ul绑定委托之后，委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件（是否是li），然后针对的获取属性或者内容，进行相关的操作。...从这里可以看到没有直接针对特定元素绑定事件，而是对事件源进行匹配，所以不存在新生元素无事件的问题。
前言 说起委托和事件，我就想起了再学校的时候，当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我，委托是什么？...在这个例子中都是返回的string，都是无参数的 委托链（多播委托） 上面我们简单的介绍了下委托及其用法，这里我们可以了解一下委托链，顾名思义，委托链也就是委托连续，啥意思呢？...注意，委托链（多播委托）--委托的签名必须返回void，否则就只能得到委托调用的最后一个方法的结果。...= LouBuy.LouBuyWater;//表示返回string类型，参数也是string类型的一个方法 总结 以前总在说委托与事件，都没有一次去了解熟悉它，现在得好好巩固一下了。...到这里就介绍完了委托，看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托加事件如何运用的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
