深入理解JavaScript的事件执行机制

什么是JavaScript事件？

JavaScript事件是指浏览器或网页中发生的特定动作，例如点击、输入、鼠标移动等等。当触发事件时，可以运行特定的代码来响应事件。

事件执行机制

JavaScript事件执行机制分为三个阶段：

事件捕获阶段：事件从文档根节点传递到目标元素之前的过程。
目标阶段：事件达到目标元素。
事件冒泡阶段：事件从目标元素传递回文档根节点的过程。

在事件执行的过程中，可以添加事件监听器来响应事件。一个元素可以添加多个事件监听器，它们按照添加的顺序执行。

示例1：简单的点击事件

<button id="myButton">点击我</button>

<script>
  // 获取元素
  const myButton = document.querySelector('#myButton');

  // 添加点击事件监听器
  myButton.addEventListener('click', function() {
    alert('你点击了按钮！');
  });
</script>

注释：此示例中，我们获取了一个按钮元素，然后给它添加了一个点击事件监听器。当用户点击按钮时，会弹出一个对话框，显示“你点击了按钮！”。这里的事件执行机制是非常简单的，只有目标阶段一个阶段。

示例2：事件捕获和阻止默认行为

<body>
  <div id="outer">
    <div id="inner">
      点我！
    </div>
  </div>

  <script>
    // 获取元素
    const outer = document.querySelector('#outer');
    const inner = document.querySelector('#inner');

    // 添加事件监听器
    outer.addEventListener('click', function() {
      alert('你点击了外部元素！');
    }, true);

    inner.addEventListener('click', function(event) {
      alert('你点击了内部元素！');
      event.stopPropagation();
      event.preventDefault();
    }, true);
  </script>
</body>

注释：在这个示例中，我们有两个嵌套的div元素。我们添加了两个事件监听器，一个在外部元素（outer）上，一个在内部元素（inner）上。我们还使用“capture”参数将这两个事件监听器设置为捕获阶段。在点击内部元素时，会先触发外部元素的事件，然后才会触发内部元素的事件。但是，由于我们调用了event.stopPropagation()和event.preventDefault()，因此外部元素的事件处理函数不会继续执行，也不会跳转到默认链接。因此，在这个示例中，内部元素的事件处理函数是唯一执行的函数。