持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
事件委托
事件委托的基础是事件捕获和冒泡。当有许多类似方式处理的元素,那么不必为每个元素分配一个处理程序,而是将单个处理程序放在它们的共同祖先上。在处理程序中,通过获取event.target以查看事件实际发生的位置,并进行处理。这就是事件委托。
事件委托的好处
- 简化初始化并节省内存:无需添加多个处理程序。
- 更少的代码: 添加或移除元素时,无需添加、移除处理程序。
- DOM修改,我们可以使用innerHTML来批量添加、移除元素。
事件委托的局限性
- 事件必须冒泡,有些事件不会冒泡。此外,低级别的处理程序不应该使用event.stopPropagation()
事件委托的使用场景
用于为许多相似的元素添加相同的处理
如果我们要实现以下功能:当鼠标点击某一li时,li加下划线。
行为模式
-
我们将自定义特性添加到描述其行为的元素
-
用文档范围级的处理程序追踪事件,如果事件发生在具有特定特性的元素上,则执行行为。