HTML 进阶-第十五篇:HTML与JavaScript深度集成-事件处理高级技巧(一)
事件委托
事件委托原理
事件委托基于事件冒泡机制。当一个元素触发事件时,该事件会从该元素开始,向上冒泡到其祖先元素,直到到达文档的根节点。利用这一特性,我们可以将事件处理程序绑定到父元素上,而不是为每个子元素分别绑定。这样,当子元素触发相同类型的事件时,事件会冒泡到父元素,父元素的事件处理程序就可以根据事件的目标(即实际触发事件的子元素)来决定执行何种操作。通过事件委托,不仅可以减少事件处理程序的数量,从而节省内存,还能更方便地处理动态添加的元素,因为父元素的事件处理程序会自动应用到新添加的子元素上。
示例:无序列表的点击事件委托
以下是一个详细的示例,展示如何对包含多个列表项的无序列表使用事件委托来处理点击事件:
<!DOCTYPE html>