精华内容
下载资源
问答
  • 主要介绍了JavaScript事件委托实现原理及优点进行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了JS 事件绑定、事件监听、事件委托详细介绍的相关资料,需要的朋友可以参考下
  • 大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡,冒泡或默认的事件发生,在某些时候是不需要的,在此就需要一些可以阻止冒泡和默认的事件的方法,本文介绍三种方法做到不同程度的阻止,感...
  • 事件委托

    2021-01-08 15:04:49
    事件委托 子元素的事件交给父元素去处理 语法 事件对象.target (精准的事件源) 在低版本Ie的语法: 事件对象.srcElement 兼容写法: var target = e.target || e.srcElement;//e为事件对象 事件委托的好处: ...
  • 其所谓的动态添加事件实质就是指js中的事件委托。 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是...
  • 先给大家讲下什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。 也就是:...
  • Javascript事件流(事件捕获、事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...
  • 网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么...
  • 基于C++实现事件委托功能,设计模式中比较常用的一种模式,类似与C#中的事件委托
  • 如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子...
  • 主要介绍了JS中的事件委托,结合实例形式简单分析了javascript事件委托的概念、功能、使用方法及相关注意事项,需要的朋友可以参考下
  • java 观察者模式 事件委托
  • 下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的,解决方法就是加一句阻止冒泡即可
  • 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托...
  • 事件委托实例

    2019-04-09 01:03:04
    NULL 博文链接:https://maoting.iteye.com/blog/1617750
  • C#,事件委托,订阅-发布
  • d3中事件委托的实现 正在安装 npm i --save d3-delegation或yarn add d3-delagation 方法 委托事件() 参数 描述 类型 默认 parentSelector 父svg元素或包含用于匹配父svg元素的选择器表达式的字符串 元素或字符...
  • 事件委托的封装.html

    2019-08-31 09:20:48
    通过e.target获取触发事件事件源 利用事件冒泡原理,将绑定在多个子元素身上的相同事件,绑定在页面上现存的父元素身上。
  • C# 事件委托简单封装示例,按照基本步骤实现对事件委托的一个简单封装。通常可封装在自定义控件,或者业务方法中
  • 本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考,具体如下: 事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时,这种...
  • jQuery事件委托之Safari

    2021-01-19 15:27:55
    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 //常见的事件绑定(Jquery) $(element).click...
  • js事件委托利用

    2021-01-08 17:25:33
    事件委托是什么呢?事件委托在实际编写代码中又有什么优势呢? 事件委托的原理是事件冒泡,最重要的功能就是提高程序运行效率。 事件冒泡是什么呢? 事件流分为两种一种是事件冒泡另一种是事件捕获。 事件冒泡:从子...
  • 本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多...
  • 1. 什么是事件委托 事件委托:把事情委托给别人,代为处理。 事件委托也称为事件代理,在 jQuery 里面称为事件委派。 理解:说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中...

    1. 什么是事件委托

    • 事件委托:把事情委托给别人,代为处理。

    • 事件委托也称为事件代理,在 jQuery 里面称为事件委派。

    • 理解:说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。

    • js事件中的委托:

      <ul>
            <li>知否知否,应该有弹框在手</li>
            <li>知否知否,应该有弹框在手</li>
            <li>知否知否,应该有弹框在手</li>
            <li>知否知否,应该有弹框在手</li>
            <li>知否知否,应该有弹框在手</li>
      </ul>
    

    点击每个 li 都会弹出对话框,以前需要给每个 li 注册事件,是非常辛苦的,而且访问 DOM 的次数越多,这就会延长整个页面的交互就绪时间,那怎么解决呢?

    2. 事件委托的原理

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

    ​ 以上案例:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器

    3. 事件委托的作用

    • 我们只操作了一次 DOM ,提高了程序的性能。

    • 动态新创建的子元素,也拥有事件。

        <ul>
            <li>知否知否,点我应有弹框在手!</li>
            <li>知否知否,点我应有弹框在手!</li>
            <li>知否知否,点我应有弹框在手!</li>
            <li>知否知否,点我应有弹框在手!</li>
            <li>知否知否,点我应有弹框在手!</li>
        </ul>
        <script>
            /*事件委托的核心原理:给父节点添加侦听器, 
            利用事件冒泡影响每一个子节点*/
            var ul = document.querySelector('ul');
            ul.addEventListener('click', function(e) {
                // e.target 这个可以得到我们点击的对象
                e.target.style.backgroundColor = 'pink';
            })
        </script>
    

    4. 总结

    • 事件委托,子元素委托父元素
    • 什么情况下用事件委托:当要给一组元素添加相同事件时,可以直接添加给父亲
    • 事件委托原理:事件冒泡,当触发子元素的事件时,通过冒泡,事件传递给父亲,父亲身上绑定有事件处理程序,进而触发
    展开全文
  • 事件委托 事件委托的事例在现实当中比比皆是。比如,有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也...
  • 主要介绍了java实现事件委托模式的实例详解的相关资料,这里提供实例来说明如何实现改功能,希望能帮助到大家理解这样的模式,需要的朋友可以参考下
  • JS事件委托实例总结

    千次阅读 多人点赞 2019-09-12 11:51:46
    事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的...

    基本概念
    事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

    引言

    事件委托应用在很多开发场景之中,但是很多同学对委托的原理、特别是对JS原生实现委托不太了解。每每看到此情此景我总觉得“众生皆苦”,正所谓“我不写文章,谁写文章”的普渡心态,是以提供这篇文章解救众生之苦,阿弥陀佛!

    释义

    在学事件委托时,我们有必要先对事件委托做一个定义。

    JS里的事件委托:就是当事件触发时,把要做的事委托给父元素来处理。

    再通俗点:就是自己的事不想干,叫它爸爸,甚至爷爷、甚至祖先来干。

    作用

    在学它的用法和原理之前,我们先了解一下它的作用,有什么好处。再让各位决定是否愿意继续看下去呢?

    作用1:节约内存(哇塞,这个好这个棒!)

    作用2:能为之后新增的DOM元素依然添加事件(路人甲:这什么鬼?我:死相,真猴急。往后面看就知道了!)

    揭开事件委托面纱

    场景1:当多个li标签需要添加点击事件时

    代码如图:
    在这里插入图片描述

    代码解析:

    给5个li标签加了点击事件,当界面上点击li时,会打印它们各自li标签显示的内容。

    出现的问题:

    此时5个li,看起来每个li的点击事件触发时调用的都是同一个函数,即:

    function(){
    
    
    console.log(this.innerHTML);
    
    };
    

    但其实并不是这样。每个li绑定的都是一个全新的函数,只不过每个函数的样子都一毛一样。

    如何验证这个结论呢?很简单,判断每个li标签的onclick是否相等就可以了。

    代码验证如下:

    在这里插入图片描述
    得到结果:

    在这里插入图片描述
    至于上面说的函数长得一样,但不是同一个数据这种情况就类似于 var obj1 = {name:"jack",age:16}和var obj2 = {name:"jack",age:16},obj1 == obj2得到的结果也会是false(如对这一块不理解,下次有空再写一篇文章解答。)

    至此,我们可以得到结论,如果有5个li,那么就有5个函数会被创建在内存中占据空间,那如果有100个li呢?就会有100个长相一毛一样的函数在内存中常驻,对内存的开销是巨大的!

    解决办法:

    利用事件冒泡的原理,把事件加在父元素(ul)身上!

    代码如下:
    在这里插入图片描述

    原理解析:

    回顾事件冒泡

    事件冒泡:即一个元素的事件触发后,会依次一级一级往上调用父级元素的同名事件,直到window(注:IE8和之前的浏览器只到document)

    例:div > p > span 当div和p以及span都添加了click事件,当点击span时,会依次向上触发span、p、div的click事件。

    代码如下:
    在这里插入图片描述

    效果如下:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190912115342992.png?x-oss-process=image/watermar在这里插入图片描述
    其中,在每个触发的事件里,通过事件对象.target能拿到触发事件的源头元素,也就是 事件源。

    因此,在上述代码中,改成
    在这里插入图片描述

    可发现,触发事件时,打印出来的e.target都是span,如下:

    在这里插入图片描述

    :事件对象在ie8中要通过window.event才能取到,因此e = e || window.event是做兼容处理

    解释委托原理

    在回顾完事件冒泡后,我们显而易见得到结论:给所有li添加点击事件,只要加到它们的父元素ul身上的根本原因是利用了事件冒泡。也即:无论点击哪个li,都会自动触发ul的点击事件,然后在ul里通过e.target能获得真正被点击的那个li,继而拿到它的innerHTML

    小结:如果给一堆元素加事件,并且事件触发时执行的代码都差不多时,就可以把事件加在父元素身上啦!这样可以更节省内存空间哦!O(∩_∩)O哈哈~(来自抠脚大汉的卖萌符号)

    看,这样的形式是不是就相当于把自己的事件,委托在父元素身上处理了呢?因而它才会叫事件委托!

    也就是:自己的活不干了,给它爹去干!(画外音:一看就是坑爹的货~)

    存在问题及解决方式

    思考:如果ul里还有其他子元素例如span,可我只想给li加点击事件,用原来写的事件委托还行吗?

    答案是否定的,因为根据事件冒泡原理,所有子元素点击后都会触发父元素的点击,因此,如果你点击了span,也会调用ul的点击事件,这就相当于给span也加了点击事件。这时候该怎么解决呢?

    很简单,只要判断一下事件源是不是li就行了,如果是li才执行代码,否则不执行,代码如下:

    在这里插入图片描述

    场景2: 新增元素没有绑定事件的问题

    界面描述:

    界面上有一个ul里面默认有5个li,并且还有一个按钮,当点击按钮就创建一个新的li,需要不管是默认有的li还是新的li都有点击事件

    问题描述:

    我们先尝试不用事件委托普通写法会怎么写,代码和界面如下:
    在这里插入图片描述

    JS部分代码如下:

    在这里插入图片描述
    此时会发现,页面刚开始加载时就默认存在的5个li是有点击事件的,但是点击按钮创建出来的li没有点击事件。

    原因剖析:

    因为上面的JS代码是在页面刚加载时执行的,在当时因为不可能去点击按钮,所以能找到的li标签只有默认那5个,因此你打印liList,发现也只有5个

    因此,你遍历liList给每个元素加点击事件时,只能给这5个li加到点击事件。因此,如果后面再有li标签,也不拥有点击事件。

    使用事件委托解决

    代码如下:
    在这里插入图片描述

    把事件只加在ul身上,即可解决,这样内存占用更低,代码也少了很多!效果如图:
    在这里插入图片描述

    我们可以看到,不管是默认有的5个li还是后面才增加的li都有点击事件了

    解析:因为事件冒泡机制的存在,不管是原本有的li还是新创建的li,当事件触发时都会一级一级往上调用父元素的同名事件。因此,只要是点击的li标签,都会触发ul的点击事件,所以只要把事件加在ul身上就解决了不管新旧li标签都有点击事件的问题。

    jQuery里的事件委托

    众所周知,jQuery是JS的一个伟大的第三方库(什么?你还不知道?火星了吧!赶紧恶补!)。JS有的方法,jQuery里都有,并且代码写起来更短。因此事件委托,其实在jQuery里也存在!

    jQuery事件委托语法:

    $(‘父元素’).on(‘事件名’,‘哪个子元素触发’,传给回调函数的参数,事件触发时的回调函数);

    解释:

    参数1:事件名,代表要绑定什么事件,但是记得不用加on,也就是说如果你想加点击事件,只要写’click’即可,注意是字符串!所以要打单引号或者双引号

    参数2:只能由哪个子元素触发,例如我写 “li”,就代表只能由这个父元素里面的li触发事件,其他子元素不会触发。需要注意的是,这也是字符串,并且,参数2可以不写,那就代表仅仅只是给父元素加一个点击事件,并且所有子元素都能触发到这个事件(因为事件冒泡)

    参数3:其实一般不会用,就是如果想事件触发时,自己给回调函数传一些值就写,这个参数也可以不写!

    参数4:事件触发时的回调函数

    总结:参数1和参数4是必须的,其他是可选的,如果你要用事件委托,请写上参数2

    例:

    在这里插入图片描述
    说明:

    1.on这个方法的参数3可以通过回调函数里的e.data拿到(但一般不会用,大家了解一下有这么个东西即可)

    2.在jQuery事件委托的回调函数里this和e.target是同一个东西,但是在JS里this和e.target不是同一个东西

    一般参数3不会写,因此代码常见会写成这样:

    在这里插入图片描述

    结语

    其实在其他语言里,事件委托会比较复杂,需要创建额外对象。但是由于JS的灵活性,使得在JS里仅仅只需要把事件绑定在父元素即可实现。

    事件委托虽然在面试题中略微少见,但是在实际开发中几乎都会用到。因为有时候需要给某一类元素加事件(例如给所有li加点击事件),因为网页内容经常改变,这类元素随时会增加或者减少,为了保证所有这类元素都有事件,也为了节约内存,所以都需要采用事件委托才可实现!

    展开全文
  • 事件委托又称事件代理, 下面将要将要简要叙述一下这种方法的原理及优点 一什么是事件委托? 我们看下面的例子: 假使我们需要对 3 个 li 元素添加点击事件: 传统的方法是分别给每个 li 元素绑定 click 事件 ...

    事件委托又称事件代理, 下面将要将要简要叙述一下这种方法的原理及优点

    一什么是事件委托?

    我们看下面的例子:

    假使我们需要对 3 个 li 元素添加点击事件:
    

    传统的方法是分别给每个 li 元素绑定 click 事件

    假使 li 元素特别多呢? 可能你已经想到这样一个一个添加 click 事件是相当麻烦的, 那么是否有优化方法呢?

    当然, 我们只需要在 ul 元素上添加一个事件处理程序这种在 DOM 树中尽量最高的层次上添加事件处理程序的方式便是事件委托, 主要用于解决事件处理程序过多问题

    二事件委托如何工作?

    我们现在的疑问是: ul 元素如何知道 li 元素点击了呢?

    很简单, 由于所有 li 元素都是 ul 元素的子节点, 故他们的事件会冒泡, 无论点击哪个 li 元素, 实际上都相当于点击了 ul 元素

    现在产生了另一个问题: ul 元素如何知道是在哪个 li 元素上点击的呢?

    我们很容易想到, 在 ul 的事件处理程序中检测事件对象的 target 属性, 就可以得到真正点击的目标元素

    三事件委托的优点

    首先, 我们看到添加的事件处理程序减少, 可以只有一个事件处理程序由于每个函数都是对象, 对象会占用内存, 内存的占用关系到性能因此第一个优点是:

    减少了内存占用, 性能更好;

    在访问 DOM 方面, 也使得 DOM 访问次数减少试想一下, 如果要为许多的 DOM 元素绑定事件, 自然需要多次访问 DOM 元素, 设置事件处理程序所需时间更长, 整个页面就绪需要的时间越多因此第二个优点是:

    设置事件处理程序所需时间更少, 加快了整个页面的交互就绪时间

    假使我们将事件处理程序绑定到 document 对象上, 只要可单击的元素呈现在页面上, 就可以立即具备适当的功能即还会有一个额外的优点:

    document 很快就可以访问, 而且可以在页面生命周期的任何时点添加事件处理程序, 而不用等待其他事件完成如 DOMContentLoadedload 事件

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 130,599
精华内容 52,239
关键字:

事件委托

友情链接: Sample.rar