我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript事件委托原理

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript事件委托原理

一、什么是事件委托

事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现。

举个简单的例子:

例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长。同时每个学生领取的时候,也需要排队领取,也花费时间较长,应该怎样操作呢?这时快递员可以把100个快递委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。这样的话,快递员省事,同学们领取也更方便。这个过程就是一个委托事件。

二、事件委托的原理

不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

我们再来看看在具体的程序中是如何实现的吧!
比如,我们现在有一个无序列表,在无序列表里面有五个li,我们想要给每个li添加一个点击事件,这个时候,我们常规操作是通过循环给每个li添加点击事件。

代码如下所示:


<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
    <script>
        var li = document.querySelectorAll('li');
        for(var i=0;i<li.length;i++){
            li[i].onclick = function(){
                this.style.color = 'green';
            }
        }
    </script>
</body>

运行结果为:

这种方法的确可以实现我们的点击操作,但是这个过程中,由于每次都要给li添加点击事件,造成访问DOM的次数过多,会延长整个页面的交互就绪时间。

所以,这里,我们就可以用到事件委托,即给ul注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器。

实现代码为:


<script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            e.target.style.color = 'orange';
        })
    </script>


运行结果为:

成功显示。

三、事件委托的作用

通过上面的操作,我们可以得到:在事件委托中,我们只操作一次 DOM ,大大的提高了程序的性能。

到此这篇关于JavaScript事件委托原理的文章就介绍到这了,更多相关JavaScript事件委托内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript事件委托原理

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript事件委托原理是什么

JavaScript事件委托原理是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、什么是事件委托事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素
2023-06-21

javascript事件委托理解,jQuery .on()方法一步到位实现事件委托

事件委托是一种处理事件的技巧,可监听父元素上的事件,并针对子元素执行特定操作。jQuery的.on()方法提供了简洁易用的方式来实现事件委托。它允许在父元素上附加一个事件句柄,当子元素触发事件时,事件会冒泡到父元素并触发事件句柄,从而检查目标元素是否与子元素选择器匹配。如果匹配,则调用事件处理函数。事件委托的主要优点包括性能优化、代码简化和动态元素处理。
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托
2024-04-02

什么是javascript事件委托

本篇文章为大家展示了什么是javascript事件委托,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。在javascript中,事件委托就是利用冒泡的原理,将事件加到父元素或祖先元素上,触发执行效果。
2023-06-14

如何使用 JavaScript 事件委托来处理复杂交互?(JavaScript事件委托怎样处理复杂交互)

在JavaScript开发中,处理复杂交互是一项常见且重要的任务。事件委托是一种有效的技术,它可以帮助我们更高效地处理大量的DOM元素的事件。下面我们将详细介绍JavaScript事件委托怎样处理复杂交互。一、事件委托的基本概念
如何使用 JavaScript 事件委托来处理复杂交互?(JavaScript事件委托怎样处理复杂交互)
JavaScript2024-12-20

怎么在JavaScript中实现事件委托

怎么在JavaScript中实现事件委托?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。事件委托利用事件冒泡,指定一个事件处理程序,管理一系列的所有事件事件委托利用DOM元素
2023-06-15

怎么理解js事件委托

这篇文章主要讲解了“怎么理解js事件委托”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么理解js事件委托”吧!1、每个函数都是对象,占用内存。内存中的对象越多,性能越差。解决事件处理过多问
2023-06-25

C#委托和事件怎么理解

这篇文章主要介绍“C#委托和事件怎么理解”,在日常操作中,相信很多人在C#委托和事件怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#委托和事件怎么理解”的疑惑有所帮助!接下来,请跟着小编一起来学习吧
2023-06-17

JavaScript 事件委托:让你的代码起飞!

JavaScript 事件委托是一种强大的技术,可以帮助你优化事件处理,提高代码性能和可维护性。本文将介绍事件委托的概念、工作原理并通过示例演示其使用方式。
JavaScript 事件委托:让你的代码起飞!
2024-02-06

JavaScript 事件委托:前端开发的艺术

JavaScript 事件委托是一种强大的技术,它可以帮助前端开发人员在处理事件时提高性能和代码的可读性。通过将事件处理程序附加到一个祖先元素,而不是每个子元素,可以减少需要附加的事件处理程序的数量,从而提高性能。此外,通过使用事件委托,可以更轻松地管理事件处理程序,并使代码更易于阅读和维护。
JavaScript 事件委托:前端开发的艺术
2024-02-06

如何通过 JavaScript 事件委托来简化代码逻辑?(JavaScript事件委托怎样简化代码逻辑)

在JavaScript开发中,代码的简洁性和可维护性是非常重要的。而事件委托就是一种能够有效地简化代码逻辑的技术。一、什么是JavaScript事件委托?事件委托,也称为事件代理,是一种利用事件冒泡的特性,将事件处理程序
如何通过 JavaScript 事件委托来简化代码逻辑?(JavaScript事件委托怎样简化代码逻辑)
JavaScript2024-12-22

编程热搜

目录