DOM事件与事件委托的趣味解析

2023-12-14 00:08:53

前言

我们知道，当用户与网页上的元素进行交互时，就会触发对应的DOM事件。这些事件可以是鼠标点击、键盘输入、鼠标移动等。浏览器会将这些事件传递给对应的HTML元素，然后HTML元素会触发相应的事件处理程序。

DOM事件

DOM事件是发生在DOM元素上的事件。当用户与网页上的元素进行交互时，就会触发对应的DOM事件。例如，当用户点击一个按钮时，就会触发click事件；当用户在文本框中输入文字时，就会触发input事件；当用户移动鼠标时，就会触发mousemove事件。

DOM事件可以分为两类：

冒泡事件 ：冒泡事件是指事件会从触发事件的元素一直向上冒泡，直到到达根元素。例如，当用户点击一个按钮时，click事件会从按钮元素冒泡到父元素，再冒泡到祖父母元素，依此类推，直到到达根元素。
捕获事件 ：捕获事件是指事件会从根元素一直向下捕获，直到到达触发事件的元素。捕获事件与冒泡事件相反，事件会从根元素开始传播，然后依次向下传播到子元素、孙子元素，依此类推，直到到达触发事件的元素。

事件委托是一种将事件处理程序委托给父元素或祖先元素的技巧。这样，当子元素触发事件时，事件处理程序就会被调用。

事件委托的优点有很多：

提高性能 ：事件委托可以提高页面的性能。当事件委托给父元素或祖先元素时，浏览器只需要为这些元素添加一个事件监听器，而不是为每个子元素都添加一个事件监听器。这可以减少浏览器的开销，从而提高页面的性能。
简化代码 ：事件委托可以简化代码。当事件委托给父元素或祖先元素时，就不需要为每个子元素都写一个事件处理程序。这可以使代码更加简洁和易于维护。
提高灵活性 ：事件委托可以提高代码的灵活性。当事件委托给父元素或祖先元素时，可以很容易地添加或删除子元素，而不需要修改事件处理程序。这使得代码更加灵活和可维护。

为了让大家更好地理解DOM事件和事件委托的概念，我们接下来用几个有趣的问题和例子来解释这些概念。

点击文字，算不算点击儿子？

算。当用户点击文字时，事件会从文字元素冒泡到父元素，再冒泡到祖父母元素，依此类推，直到到达根元素。因此，当用户点击文字时，也会触发父元素和祖父母元素的click事件。
点击文字，算不算点击爸爸？

算。当用户点击文字时，事件会从文字元素冒泡到父元素。因此，当用户点击文字时，也会触发父元素的click事件。
点击文字，算不算点击爷爷？

算。当用户点击文字时，事件会从文字元素冒泡到父元素，再冒泡到祖父母元素。因此，当用户点击文字时，也会触发祖父母元素的click事件。