javascript事件委托详解

本文详细探讨了JavaScript事件委托的概念,阐述了其带来的优势,包括减少事件监听器、提高性能等。通过实例介绍了如何实现基本的事件委托,并讨论了如何进行代码封装以优化使用。同时,文章也提到了事件委托可能存在的局限性,帮助读者全面理解这一技术。
摘要由CSDN通过智能技术生成
事件委托:就是将子类的事件交给父类去执行。事件委托利用的是事件冒泡的机制。

一、事件委托的好处

1、减少内存消耗
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
正如上面的例子,如果我们需要给每一个li标签都设置点击事件,那么需要设置很多
个点击事件,导致内存消耗就很大。如果我们使用事件委托,将全部的事件都委托给
最外层的Ul上,那么只需要在ul上监听一个事件即可。
2、动态绑定事件
我们在开发中很多时候,都需要去异步请求数据,并且将数据展示到前端页面上,如
果我们给每一个标签元素都设置点击事件,那么就必须在每一次新增或者删除标签元
素时,都要将相关的事件进行解绑或者新增。如果使用事件委托,那么就不用在标签
删除的时候将相关事件解绑或者赋值,因为所有的事件都设置在外层的标签元素上。

二、基本实现

<body>

  <ul>
    <li>标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</li>
  </ul>

  <script>
    document.getElementsByTagName("ul")[0].addEventListener("click", function(e) {
   
      var event = e || window.event //兼容性问题
      var target = event.target || event.srcElement  //兼容性问题
      if(target.nodeName.toLowerCase() === "li") {
   
        console.log("this  is tag of li:" + target.innerHTML)
      }
    })
  </script>
</body>
试想一种情况,如果我们只是需要所有标签中的class为liStyle的元素,我们可以使用target.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值