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事件委托内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript事件委托的技术原理探讨示例

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

  • JavaScript事件委托实现原理及优点进行

    1.什么是事件委托? 事件委托就是利用冒泡的原理,将事件加到 父元素 或 祖先元素上,触发执行效果. 例:在 document 中绑定 click 事件,当 click 的对象为 按钮 btn 时,弹框显示 按钮 btn的值 <body> <button id="btn" value="嘿嘿">哈哈</button> <script> window.onload=function () { let btn=docume

  • JavaScript事件委托原理与用法实例分析

    本文实例分析了JavaScript事件委托原理与用法.分享给大家供大家参考,具体如下: 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道.所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题. 1. js中的事件流 在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获. ① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上

  • JavaScript事件委托技术实例分析

    本文实例分析了JavaScript事件委托技术.分享给大家供大家参考.具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托: 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件委托技术利用了事件冒泡.只需指定一个事件处理程序. 我们可以为某个

  • JavaScript事件委托用法分析

    本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体分析如下: 一.点击页面任何部分触发事件 创建一个script1.js文件. 复制代码 代码如下: (function() {     eventUtility.addEvent(document, "click", function(evt) {         alert('hello');     }); }()); 页面部分. 复制代码 代码如下: <head> <meta http-e

  • js事件委托详解

    1.每个函数都是对象,占用内存.内存中的对象越多,性能越差.解决事件处理过多问题的办法是事件委托. 2.事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实例 <ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text

  • JavaScript事件委托实例分析

    本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体如下: var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) addEv

  • javascript事件委托的用法及其好处简析

    本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下 事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果, 好处:提高性能,新添加的元素还会有之前的事件. event对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源 获取事件源: IE:window.event.srcElement 标准下:event.target  target.nodeName来判断是哪个标签 代码应用如下: <!DOCTYPE html PUBLIC "-//W

  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #

  • JavaScript事件委托原理

    JavaScript事件委托原理

    目录 一.什么是事件委托 二.事件委托的原理 三.事件委托的作用 一.什么是事件委托 事件委托也称为事件代理.就是利用事件冒泡,把子元素的事件都绑定到父元素上.如果子元素阻止了事件冒泡,那么委托就无法实现. 举个简单的例子: 例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长.同时每个学生领取的时候,也需要排队领取,也花费时间较长,应该怎样操作呢?这时快递员可以把100个快递委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可.这样的话,快递员省事,同学们领

  • JQuery事件委托原理与用法实例分析

    本文实例讲述了JQuery事件委托原理与用法.分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.事件委托首先可以极大的减少事件绑定次数,其次也可以让新加入的子集元素也拥有相同的操作. 一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

随机推荐