事件委托

最新推荐文章于 2025-04-01 00:00:58 发布

原创最新推荐文章于 2025-04-01 00:00:58 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件委托 #多click

Web前端专栏收录该内容

40 篇文章

订阅专栏

在项目中，通过采用委托事件处理图片列表的删除操作，不仅提高了代码质量，还有效避免了潜在的BUG。本文详细介绍了如何使用jQuery和原生JS实现这一优化，并附带了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目时遇到的问题：

对图片列表中的图片单击删除，一开始是在每张图片上绑定的点击删除事件，后经大佬指点改为使用委托事件。

虽然效果相同，但代码质量不同，而且能避免不必要的BUG。

上代码：

Jquery：

<div class="col-xs-7 demo demo-noninputable cjy-InfoEntry-pic" id="cjy-InfoEntry-pic">
                          <div class="cjy-InfoEntry-imgDiv"><img src='' alt=''/><i class="iconfont icon-cha cjy-InfoEntry-cha" ></i></div>
                          <div class="cjy-InfoEntry-imgDiv"><img src='' alt=''/><i class="iconfont icon-cha cjy-InfoEntry-cha" ></i></div>
                          <div class="cjy-InfoEntry-imgDiv"><img src='' alt=''/><i class="iconfont icon-cha cjy-InfoEntry-cha" ></i></div>
                          <div class="cjy-InfoEntry-imgDiv"><img src='' alt=''/><i class="iconfont icon-cha cjy-InfoEntry-cha" ></i></div>
                        </div>

$('#cjy-InfoEntry-pic').on("click", '.cjy-InfoEntry-cha', function (e) {
        var $i = $(e.target);
        var $div = $i.closest('.cjy-InfoEntry-imgDiv');
        var index = $div.index();
        console.log('点击了第'+index+'张图片的删除按钮');
    });

JS：

var parentList = document.getElementById("cjy-InfoEntry");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "i"){
    alert(target.firstChild.nodeValue);
  }
},false);