细读JS之“日理万机”的事件机制：从冒泡到捕获

文章内容：

    ## 简介

    **事件机制** 是 JavaScript 中用于处理用户交互和网页元素状态变化的重要机制。它使我们能够在用户与网页元素交互时执行特定的代码，从而实现各种交互效果。JavaScript 事件机制主要包括事件冒泡和事件捕获两个方面。

    ## 事件冒泡

    事件冒泡是指当一个事件发生时，它会从触发事件的元素开始，向其父元素依次向上冒泡，直到到达根元素（通常是文档对象）。在冒泡过程中，每个元素都可以对事件做出响应，并执行相应的事件处理程序。

    举个例子，如果我们在一个按钮上添加一个点击事件监听器，当用户点击按钮时，这个事件会从按钮元素开始冒泡，依次经过其父元素（比如 div 元素和 body 元素），直到到达文档对象。在这个过程中，每个元素都可以对这个点击事件做出响应，并执行相应的事件处理程序。

    **事件冒泡的特点** 
    * 从内向外触发
    * 先子再父
    * 同一层级谁近先谁
    * 在元素被点击时触发

    ## 事件捕获

    事件捕获与事件冒泡相反，它是指当一个事件发生时，它会从根元素开始，向下捕获到触发事件的元素。在捕获过程中，每个元素都可以对事件做出响应，并执行相应的事件处理程序。

    举个例子，如果我们在文档对象上添加一个点击事件监听器，当用户点击页面上的任何元素时，这个事件会从文档对象开始捕获，依次经过其子元素（比如 body 元素和 div 元素），直到到达触发事件的元素。在这个过程中，每个元素都可以对这个点击事件做出响应，并执行相应的事件处理程序。

    **事件捕获的特点** 
    * 由外向内触发
    * 先父再子
    * 同一层级谁近先谁
    * 在元素被点击时触发

    ## 事件冒泡和事件捕获的应用场景

    事件冒泡和事件捕获机制在 JavaScript 中有广泛的应用场景。

    **事件冒泡的应用场景** 
    * 表单元素验证：我们可以利用事件冒泡来对表单元素进行验证。当用户输入表单元素时，我们可以监听表单元素的父元素（比如 form 元素）的事件，这样当用户在任何表单元素中输入内容时，都会触发这个事件，我们可以利用这个事件来对表单元素进行验证。
    * 菜单项的级联菜单：我们可以利用事件冒泡来实现菜单项的级联菜单。当用户将鼠标悬停在菜单项上时，我们可以监听菜单项的父元素（比如 ul 元素）的事件，这样当用户将鼠标悬停在任何菜单项上时，都会触发这个事件，我们可以利用这个事件来显示菜单项的子菜单。

    **事件捕获的应用场景** 
    * 阻止事件冒泡：我们可以利用事件捕获来阻止事件冒泡。当我们不想让一个事件冒泡到其父元素时，我们可以利用事件捕获来阻止这个事件的冒泡。
    * 捕获键盘事件：我们可以利用事件捕获来捕获键盘事件。当用户按下键盘上的某个按键时，我们可以监听文档对象的事件，这样当用户按下键盘上的任何按键时，都会触发这个事件，我们可以利用这个事件来捕获键盘事件。

    ## 总结

    事件冒泡和事件捕获是 JavaScript 事件机制中的两个重要概念。它们允许我们对网页元素的事件做出响应，并执行相应的代码。通过理解事件冒泡和事件捕获的机制，我们可以更好地控制网页的交互行为，实现各种交互效果。