美文网首页
使用事件代理来优化dom事件的绑定

使用事件代理来优化dom事件的绑定

作者: 虾米不是鱼 | 来源:发表于2020-09-13 11:16 被阅读0次

事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。

我们有下面的一个场景:当点击li输出相应的值


<ul class="list-item">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
</ul>

我们可以这样写


var itemDom = document.getElementByClass("item")
for(var i=0, l = itemDom.length; i < l; i++){
        this.addEventListener("click",function{

          //TODO
        });
    }

其实这里面就有一个问题,如果li少的话都还行,如果有成千上万条的话就非常的占用性能

我们根据dom的冒泡性质可以这样修改,将事件绑定在ul上,并通过e.target去处理目标节点

document.getElementsByClassName("list-item")[0].addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
  if(e.target && e.target.nodeName == "LI") {

    console.log(e.target.innerText)
  }
});

//juqery

$('.list-item').on('click', '.item', function() {
  alert($(this).text())
})

相关文章

  • 使用事件代理来优化dom事件的绑定

    事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧...

  • 给动态添加的dom绑定事件,没有触发的原因

    1.事件没有绑定成功 解决方法:可以在生成dom之后再去绑定事件 2.事件委托/事件代理

  • jQuery(事件)

    DOM事件 表单事件 键盘事件 事件的绑定和解绑 事件对象的使用 自定义事件

  • jQuery 动画

    jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 使用.on( events [,selector ...

  • 绑定事件优化---事件代理

    在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两...

  • DOM事件

    1、DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0:onclick 只能绑定一个事件,绑定多...

  • jQuery事件

    一、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 .on( events [,selector ...

  • 使用原生JS 实现事件委托

    JavaScript事件代理 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素...

  • 事件操作

    事件绑定函数 简单的通用事件绑定函数 事件冒泡 事件会从触发的元素往上级元素一层一层触发 事件代理 使用代理的完善...

  • jQuery事件

    1、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 jquery在1.7版本之前绑定事件可通过bi...

网友评论

      本文标题:使用事件代理来优化dom事件的绑定

      本文链接:https://www.haomeiwen.com/subject/ddeeektx.html