事件委托是利用事件冒泡机制,将子元素事件统一交由父元素处理,避免重复绑定;通过event.target识别实际触发元素,适用于动态列表、大量节点等场景。

事件委托,也叫事件代理,是把子元素的事件处理“交给”父元素来统一响应的一种做法。核心不是给每个子元素单独绑事件,而是只在它们共同的父元素上监听一次,靠事件冒泡机制自动捕获子元素触发的动作。
它靠的是事件冒泡
点击一个 li 元素时,事件会先在这个 li 上发生,然后一层层往上传——经过 ul、div、body,直到 document。这个向上传递的过程就是冒泡。事件委托就卡在这个环节,在父元素(比如 ul)上等着,看谁冒上来的。
不需要手动给每个新添加的 li 再绑 click 不用循环遍历所有子元素去 addEventListener 页面动态增删列表项时,逻辑依然有效
关键靠 event.target 判断是谁点的
父元素监听到事件后,并不知道具体是哪个子元素被点了。这时候要读取事件对象的 target 属性:
event.target 是真正被点击的那个元素(比如某个 li 或里面的 span) 常用判断方式:if (e.target.tagName === 'LI') 或 e.target.classList.contains('item') 注意别误用 currentTarget——那是你绑定事件的那个父元素
适合这些情况
不是所有场景都得用,但下面几种特别合适:
立即学习“Java免费学习笔记(深入)”;
列表项数量多,比如商品列表、聊天消息流 内容由 JS 动态插入,比如分页加载、新增代办任务 按钮组、操作栏里一堆功能按钮,行为逻辑相似 表格行内编辑、删除、查看详情等操作
基本上就这些。写法不复杂,但容易忽略 target 的层级和类型判断,实际用时多打两行 console.log(e.target) 能省不少调试时间。
以上就是Javascript中的事件委托是什么?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1543574.html
微信扫一扫
支付宝扫一扫