SuperAPI AI 工具集

event-delegation

前端与建站

查看项目

更新于 10-16 06:14

技能介绍

用途:该规则用于审查与动态内容相关的事件绑定方式,适用于脚本、客户端组件、打包产物及运行时行为的检查。当列表项或表格行数量很多时,为每个元素单独绑定事件监听器会显著占用内存并带来性能开销;动态内容(如 AJAX 加载或用户操作后渲染的元素)在没有重新绑定监听器的情况下不会响应事件。事件委托可同时解决这两个问题。

主要能力:在父容器上挂载一个监听器,而不是给每个子元素分别绑定;使用 event.target.closest() 识别预期的目标元素;对动态添加的元素自动生效;在容器被移除时清理父容器上的监听器。

使用方式(依据资料中的操作意图整理):检查文件中是否存在在循环里把同一事件处理器绑定到多个元素的代码,建议改用事件委托;将逐元素绑定重构为在共同父容器上使用事件委托;解释事件委托、事件冒泡如何支持它,以及在什么情况下用 closest()、什么情况下用 target。代码审查时,应指出与该项规则冲突的具体导入、事件处理器、运行时副作用或阻塞操作,并说明应如何在浏览器中验证改动。

适用场景:审查列表、表格等大量重复子元素的事件绑定代码,以及处理后由 AJAX 或用户交互动态生成的 DOM 内容。

限制:资料未提供完整的实现细节、代码示例与特定框架的指导,相关内容需参见 references/rule.md;也未说明适用的框架版本、浏览器兼容性范围及具体性能数据。