首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Js 事件委托(事件代理)

    一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?...适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

    11.4K30

    js绑定事件代理的坑

    js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑。...但是这种方式好像只能是在点击的元素的上面,也就是最内层的元素上面有相应的class才能跳转,在外层加同样的class不生效,说明是我对于事件代理的理解不够深刻,其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理...s2  如果既想要内层元素含有jumpUrl的 class时执行点击事件...(e) { console.log(e.currentTarget) //获得当前绑定监听事件的元素, container console.log(e.target)/...classList.add('jumpUrl');//写在后面也可以绑定成功 注意:内层元素,即点击的目标元素必须是点击时真正的目标元素,而不是外面一层; currentTarget绑定相应想要点击的class的时候必须是做代理的即做事件监听的元素

    5K20

    jQuery事件代理

    事件代理介绍 事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作...事件代理的使用 一般绑定事件的写法: $(function(){ $ali = $('#list li'); $ali.click(function() { $(this...}) 1 2 3 4 5 事件代理的写法...$(function(){ $list = $('#list'); // 父元素ul 来代理 子元素li的点击事件 $list.delegate('li', 'click',...小结 事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能。 使用场景当多个相同的子元素绑定同一个事件,可以

    30K75

    JavaScript-事件委托(事件代理)

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

    888100

    【前端】详解JavaScript事件代理(事件委托)

    顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的职务。 事件代理的原理是DOM元素的事件冒泡。...本文将详细介绍事件代理的概念、原理、使用场景、代码示例以及注意事项。 所以在了解事件代理之前,我们需要知道什么是事件冒泡(Event Bubbling)。...事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层; 事件代理利用了事件冒泡的原理。通过在父元素上设置监听器,可以捕获到在其子元素上触发的事件。...document.title = "事件委托"; }; item3.onclick = function() { alert("hi"); }; 如果在一个复杂的...DOCTYPE html> js/jquery

    57210

    事件代理功能点分享

    接下来就让我们一起去瞧瞧团队里是如何实现的事件代理对象。...在工具中步骤截图如下: 打开事件代理开关[image.png] 在目标对象上派发一个事件 配置派发的事件 [image.png] 然后在监听对象绑定监听事件并且写上处理逻辑,例如跳转切换等等......30.gif] (不知道是哪位小伙伴写的注释,给他点赞 ) 关于事件代理是如何执行代理的代码如下所示,每次代理对象触发了事件后就通过我们的canvas画布对象把事件派发出去,传递的参数当中是代理对象关联的目标对象..._attacher, // 事件对象 event: e.event, }); } }); } 管理事件代理 在这里我们的管理事件代理对象的就是目标对象...,当我们初始化渲染页面生成图元时, 就会生成对应的事件代理对象,并且在属性面板预留了一个开关用来控制是否启用事件代理对象 // 创建事件代理对象 createEventProxyNode

    70020
    领券