开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Javascript事件委托/冒泡

JavaScript事件委托/冒泡是一种事件处理机制，用于处理多个相似元素上的相同事件。通过委托，我们可以将事件处理程序绑定到父元素上，然后通过事件冒泡机制，当事件在子元素上触发时，事件会冒泡到父元素，从而执行绑定的事件处理程序。

优势：

减少事件处理程序的数量：通过将事件处理程序绑定到父元素上，而不是每个子元素上，可以减少事件处理程序的数量，减少内存占用。
动态添加元素：对于通过JavaScript动态添加的元素，如果直接为每个元素绑定事件处理程序，会导致事件处理程序无法生效。而通过委托，可以确保动态添加的元素也能触发绑定的事件处理程序。
提升性能：委托利用了事件冒泡机制，通过将事件处理程序绑定到父元素上，可以减少事件处理程序的数量，从而提升性能。

应用场景：

列表或表格：当页面中有很多相似的元素，如列表或表格中的每一行，可以使用事件委托来统一处理它们的事件。
动态元素：当页面中有通过JavaScript动态添加的元素时，可以使用事件委托来确保这些元素也能触发事件处理程序。
性能优化：当页面中有大量元素需要绑定事件处理程序时，可以使用事件委托来减少事件处理程序的数量，提升性能。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了一系列云计算产品，包括云服务器、云存储、云数据库等，可以满足开发者在云计算领域的需求。以下是几个相关产品的介绍链接：

云服务器（ECS）：腾讯云的云服务器提供弹性计算能力，可以根据业务需求快速创建和管理云服务器实例。详情请参考：https://cloud.tencent.com/product/cvm
云存储（COS）：腾讯云的云存储服务提供可靠、安全、高可用的对象存储服务，适用于存储、备份和归档数据。详情请参考：https://cloud.tencent.com/product/cos
云数据库（CDB）：腾讯云的云数据库提供高性能、可扩展的数据库解决方案，包括关系型数据库、分布式数据库、缓存数据库等。详情请参考：https://cloud.tencent.com/product/cdb

请注意，以上链接仅供参考，具体产品选择还需根据实际需求进行评估。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

javascript入门到进阶 - 事件冒泡和事件委托详解

html> 111 222 333 JAVASCRIPT...这里写图片描述事件委托 ❝什么是事件委托： ❞ ❝事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。...(不理解冒泡的可以去百度下) ❞ ❝定义：利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。...事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。...❞ ❝事件委托的好处： ❞ ❝事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

6082 0

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: <li class="active_sort_opts" data-id...$("ul[data-type='cityPick']").on('click','li',function(){ alert("子元素li被点击"); }); 当点击具体的li元素时，发现ul的事件也被触发了...父元素ul被点击"); }); $("ul[data-type='cityPick']").on('click','li',function(e){ e.stopPropagation();//阻止冒泡...alert("子元素li被点击"); }); 加一句阻止冒泡即可。

2K10 0

事件的捕获、冒泡、委托

原声JavaScript中，事件是不可缺少的，HTML就是通过事件才能与JavaScript进行交互。...事件具有冒泡流和捕获流，两者刚好是反着来。 JavaScript原声监听事件addEventListener，接收两个参数，一个是方法，一个是布尔值，指定事件是否在捕获或冒泡阶段执行。...事件委托是什么，我相信很多用jQuery添加元素的时候（append）,，都遇见过添加的元素点击事件无法响应，其实这就是事件的委托。...一般我们给li添加点击事件是这样的 ? 但其实我们可以用事件委托 ? 这就是事件委托，事件委托好处就是添加进来的元素也能绑定事件。...对于事件，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。

1.1K1 0

javaScript事件委托

一、概念理解： 1、事件：HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如点击事件、鼠标移入/移出事件等。...事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流：冒泡事件流、捕获事件流。 3、DOM 事件模型：捕获、目标、冒泡。那什么是事件委托呢？...事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。二、事件委托的优点：那为什么要使用事件委托？...事件委托有什么好处，以及使用时要注意什么？事件委托大概有两个优点： 1、提高网页性能。 2、通过事件委托添加的事件，对后期生成的元素依然有效。上面提到的第二点如何理解呢？...三、事件委托的使用方法：使用上面 ul 的例子进行事件委托给每个 li 绑定事件，示例代码： var ul = document.querySelector("ul"); ul.onclick =

1.1K5 0

JavaScript-事件委托（事件代理）

今天给自己的知识结构填个坑，再复习下JS的事件代理。事件代理可以给JS批量生成的DOM元素添加事件，并且还可以提高效率，因为你确实不用给每个DOM节点添加事件监听了。...事件的监听器，是被添加到了它们的父元素上，监听器会分析从新生成的子元素上冒泡上来的事件，并找到是哪个子元素的事件。...id="li-4">li 4 li 5 li 6 那么，当每个子元素被点击的时候，会发生不同的事件...那么这时，你需要把事件监听器放在它们的父容器 ulId 上面。这时，当子元素被点击的事件，冒泡到父元素Li上的时候，你就可以通过检查事实的target，从而获取真正被点击的节点元素的引用。...现在大部分JS都会使用jQuery等工具库来处理DOM事件，但对于事件委托的背后原理，我们还是要了解的。浅谈数据结构 - 字典

88610 0

浅谈JavaScript的事件（事件委托）

需要事先为DOM对象指定事件处理程序，导致访问DOM的次数增多，会延迟整个页面的交互就绪时间。事件委托　　对事件处理程序过多的解决方案是使用事件委托。...事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...但是如果采用冒泡，我们只需要指定一个事件处理程序，并且能够实现同样的功能。...ul1指定了事件处理程序，在我们单击li的时候通过事件冒泡也会触发该事件，并且能够通过target来获取当前单击的元素对象。...虽然mouseover和mouseout也支持事件冒泡，但是如果使用事件委托则处理就比较麻烦，而且需要计算鼠标的位置以及元素的位置（当鼠标从一个元素移到其子节点，或者移出元素都会触发mouseout事件

1K7 0

JavaScript 事件委托以及jQuery对事件委托的支持

https://louluan.blog.csdn.net/article/details/24009177 在我的另外一篇文章解析Javascript事件冒泡机制里的最后...，从冒泡机制的角度谈了一点对Javascript 事件委托的理解。...事件监听器分析冒泡事件，去找到匹配的子节点元素，然后做出相应的事件响应。事件委托具体是怎么工作的呢？我们从下面的简单的例子开始，给大家展示事件委托的工作原理。...但是，事件委托也是有缺点的：如果现在的dom 元素分为很多很多层，对于底层事件的委托，有可能在事件冒泡的过程中，中途被某个节点终止冒泡了，这样事件就传递不到上层，则委托就会失败了。...元素作为一个冒泡事件处理的被委托者。

8236 0

JavaScript事件对象与事件的委托

事件对象包含事件相关的信息，如鼠标、时间、触发的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

9115 0

【前端】详解JavaScript事件代理（事件委托）

前言事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。...顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。...一、事件冒泡在JavaScript编程中，事件代理（Event Delegation）是一种将事件监听器应用于一个父元素，而不是直接应用于每一个子元素的技术。...缺点事件类型限制：只能捕获冒泡的事件，不能捕获不冒泡的事件。事件对象处理：需要通过事件对象的属性来确定事件的真正来源。...此时，可以利用事件委托技术解决这个问题。

2711 0

解析Javascript事件冒泡机制

原因就在于事件的冒泡，点击span的时候，span 会把产生的事件往上冒泡，作为父节点的div2 和祖父节点的div1也会收到此事件，于是会做出事件响应，执行响应函数。...类似地，对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，我们可以终止冒泡：在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点...; } }); } 比较：从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再传递；方法二在于不阻止冒泡，过滤需要处理的事件...我们再来分析一下方法二：方法二的原理是元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递；既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地...，这个模式，就是所谓的事件委托。

7384 0

浅析 JavaScript 中的事件委托

事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。...点击事件的传播分三个阶段：捕获阶段 —— 从window，document 和根元素开始，事件向下扩散至目标元素的祖先目标阶段 —— 事件在用户单击的元素上触发冒泡阶段——最后，事件冒泡通过目标元素的祖先...JavaScript事件传播 addEventListener 方法的第三个参数 captureOrOptions： element.addEventListener(eventType, handler...那么事件传播是怎样帮助捕获多个按钮事件的呢？该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。...事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。

2.6K3 0

javascript当中option事件冒泡

4.option事件冒泡马克-to-win：onChange事件option谈不到，只有select才谈onChange。只有onClick事件二者都有，才谈到冒泡。...> <SCRIPT LANGUAGE="<em>JavaScript</em>

7513 0

javascript 怎么阻止事件冒泡

1.停止事件冒泡 //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation...()方法 e.stopPropagation(); } else { //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble...= true; return false; } 2.阻止事件默认行为。...//如果提供了事件对象，则这是一个非IE浏览器 if (e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault

2.7K1 0

JavaScript事件代理和委托（Delegation）

JavaScript事件代理首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。...当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。...更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。...// statement console.log('target'+target+target.innerHTML); } 　});//默认为事件冒泡...，布尔值false 三：为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。

5971 0

JavaScript 怎么处理事件冒泡？

前言在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。...使用事件委托事件委托是一种将事件处理程序绑定到父元素而不是每个子元素的技术。通过事件委托，可以利用事件冒泡的特性，将事件处理委托给父元素来管理。...JavaScript中常见的事件传播机制。...停止事件冒泡可以阻止事件继续向父元素传播，而事件委托利用事件冒泡的特性，将事件处理委托给父元素来管理，提高性能和代码的可维护性。...示例代码展示了停止事件冒泡和使用事件委托的实现方式，帮助读者更好地理解事件冒泡的处理方法。通过灵活运用事件冒泡的处理方式，可以更好地处理和管理JavaScript中的事件。

3641 0

JavaScript面试问题：事件委托和this

详解事件委托事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...用document元素来处理按钮的点击行为就是事件委托的一个例子，另一种常见情况是，用ul元素来处理其子元素li的事件。有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。...事件捕获和事件冒泡是事件流中的两个阶段，任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。...浏览器包含一个方法来管理事件冒泡。...事件处理程序可以调用stopPropagation告诉DOM事件停止冒泡，第二个方式是调用stopImmediatePropagation，它不仅停止冒泡，也会阻止这个元素上其它监听当前事件的处理程序触发

1.3K5 0

【说站】javascript事件委托是什么

javascript事件委托是什么说明 1、事件委托是指目标节点的事件被移动到父节点上进行处理，因为浏览器冒泡的特性，当该事件被目标节点触发时，父节点也会触发它。...所以这个父节点负责监听和处理这个事件。 2、使用事件委托，只需要监听列表项的父节点上的该事件，然后对其进行统一处理。...} const parent = document.getElementById('parent'); parent.addEventListener('click', delegate); 以上就是javascript...事件委托的介绍，希望对大家有所帮助。...更多Javascript学习指路：Javascript 推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。收藏 | 0点赞 | 0打赏

3512 0

【说站】javascript事件冒泡是什么

javascript事件冒泡是什么说明 1、事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。 2、事件冒泡是默认开启的，但可以通过js代码来控制事件冒泡。...特性当触发我们的事件函数时，事件函数其实会接收到一个event对象，该对象上的stopPropagation()可以阻止事件冒泡。...当我们在我们的事件函数中执行event.stopPropagation()方法，那么事件冒泡到此就结束了。并不是所有类型的事件都支持事件冒泡。事件冒泡只会触发相同类型的事件函数。...实例 click me 如果你点击了页面中的元素，那么这个click事件会按照如下顺序传播: 1. 2. 3.... 4.document 以上就是javascript事件冒泡的介绍，希望对大家有所帮助。

5702 0

事件委托

事件委托也称事件代理，在jQuery里面就称为事件委派。事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。...事件委托的原理不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点事件委托作用绑定事件越多，浏览器内存占用越大，严重影响性能只操作一次DOM...dianwo100 借助事件代理的方法：不需要再每个li项里面添加点击事件，只需要给父容器ul绑定方法即可，不管点击哪个li项，都会根据冒泡传播的传递机制，触发点击事件，执行对应的处理方法...image.png 事件委托的优点： 1.减少事件注册，节省内存。在table上代理所有td的click事件。在ul上代理所有li的click事件。 2.可以监听动态生成的元素。

8822 0

JavaScript系列之事件冒泡机制简介

JavaScript系列之事件冒泡机制 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡顺序是由内到外进行事件传播，事件冒泡是由IE开发团队提出来的...听了简介介绍之后，您可能不理解，所以举个例子： js事件冒泡测试点击test页签，会依次执行li的onclick、ul的onclick、div的onclick，content的onclick，从内到外执行，所以这个就是冒泡事件的简单例子...最近也遇到了这种情况，所以就去网上搜索资料，简单学习一下，就是点击一个按钮的时候，竟然触发了两次，通过排查，发现了冒泡机制导致的，解决方法是禁用事件冒泡机制 w3c的方法是e.stopPropagation...todo }) 参考资料： JavaScript 详说事件机制之冒泡、捕获、传播、委托：https://www.cnblogs.com/bfgis/p/5460191.html

5572 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭