JavaScript事件模型介绍

JavaScript事件模型是一种基于浏览器内部事件循环机制的编程模型。通过事件模型，我们可以定义当某个特定事件发生时，需要执行的 JavaScript 代码。事件模型是一种异步编程的方式，它能够帮助我们编写更高效、更灵活、更交互性强的网页应用。

事件模型基本原理

事件模型基于一个事件监听器的机制，用于监视一个特定的事件是否发生。例如，我们可以监视一个按钮的 click 事件，然后在事件发生时执行指定的 JavaScript 方法。

事件监听器的代码如下：

// 监听按钮的 click 事件
document.getElementById("myButton").addEventListener("click", function(event) {
  // 执行指定的 JavaScript 方法
  console.log("按钮被点击了");
});

事件监听器的 addEventListener() 方法的参数表达了我们希望监听哪个事件、以及事件发生时需要执行哪个方法。在实际编写代码时，我们可以用各种事件类型（如 click、keydown 等）以及各种方法（如匿名函数、具名函数等）来实现不同的事件监听。

事件冒泡机制

事件模型的另一个重要概念是事件冒泡机制（Event Bubbling）。事件冒泡指的是，当一个事件发生时，它会先被最具体的元素调用，然后逐级向上传播到更一般的元素（即事件目标的祖先元素），直到到达 document 对象。例如，当我们点击一个按钮时，事件的处理过程如下：

1. 点击按钮；
2. 按钮通知 web 浏览器事件发生，web 浏览器向上发送事件；
3. 页面中的元素通过事件监听器获取事件；
4. 如果有事件监听器在监听这个事件，就执行这些事件监听器。

在上面的这个过程中，我们可以在任何一个地方捕捉这个事件，并在相应的位置进行事件处理。根据不同需求，可以在事件的冒泡阶段中的某个级别捕获事件并阻止它的继续传播。该过程的代码可参考下面的示例：

// 监听父元素的 click 事件
document.getElementById("myDiv").addEventListener("click", function(event) {
  // 阻止事件继续向父元素传播
  event.stopPropagation();
  console.log("父元素被点击了");
});

// 监听子元素的 click 事件
document.getElementById("myButton").addEventListener("click", function(event) {
  console.log("子元素被点击了");
});

在上述代码中，当单击子元素按钮时，事件会逐级向上传播，先触发子元素的事件处理程序，然后向上传播到父元素。由于父元素的事件处理程序中调用了 event.stopPropagation() 来阻止事件继续传播，因此子元素的点击事件不会继续传播到父元素。

事件模型应用示例

下面是两个事件模型应用示例：

示例一：鼠标移动动画

我们可以编写以下代码，实现鼠标移过一个元素时，该元素的背景色会不断地从 red 到 blue 之间变化：

<div id="myDiv" style="background-color:red; width:100px; height:100px;"></div>

// 监听元素的 mousemove 事件
document.getElementById("myDiv").addEventListener("mousemove", function(event) {
  // 获取元素背景色的当前值
  var bgColor = this.style.backgroundColor;

  // 获取背景色的红、绿、蓝三个通道的值
  var rgbArray = bgColor.match(/\d+/g);

  // 计算背景色的新颜色值（在红、绿、蓝三个通道上加上一定的数值）
  rgbArray[0] = +rgbArray[0] + 10;
  if (rgbArray[0] >= 255) rgbArray[0] = 0;
  rgbArray[1] = +rgbArray[1] - 10;
  if (rgbArray[1] <= 0) rgbArray[1] = 255;
  rgbArray[2] = +rgbArray[2] + 5;
  if (rgbArray[2] >= 255) rgbArray[2] = 0;

  // 更新元素的背景色
  this.style.backgroundColor = "rgb(" + rgbArray.join(",") + ")";
});

在上述代码中，我们使用 mousemove 事件监听器来动态更新元素的背景色。当鼠标移动到该元素上时，事件处理程序会被执行，然后计算出新的背景色，并更新元素的背景色属性。

示例二：阻止表单提交

我们可以编写以下代码，实现阻止用户在提交表单时意外地关闭了窗口：

<form id="myForm" onsubmit="return false;">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

// 监听表单的 submit 事件
document.getElementById("myForm").addEventListener("submit", function(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();

  // 校验表单输入项的合法性
  var username = this.elements["username"];
  var password = this.elements["password"];
  if (username.value == "" || password.value == "") {
    alert("请输入用户名和密码");
  } else {
    // 提交表单
    this.submit();
  }
});

在上述代码中，我们使用 submit 事件监听器来处理用户提交表单时的行为。当用户点击表单中的提交按钮时，事件处理程序会被执行，然后判断表单中的用户名和密码输入是否为空。如果有为空的情况，就弹窗提示用户输入合法的用户名和密码；否则，就正常地提交表单。此外，由于我们使用了 event.preventDefault() 方法来阻止了默认的提交行为，因此该页面也不会因为用户误操作而被无意中关闭。