返回

让JS事件机制小白都能听懂！

前端

JS中的同步编程和异步编程

JavaScript是一种单线程语言，这意味着它一次只能执行一项任务。在同步编程中，代码会按照从上到下的顺序执行，一个任务必须等到上一个任务完成后才能开始执行。这就好比在一个只有一个通道的公路中，汽车必须一辆接一辆地行驶，后面的汽车必须等到前面的汽车通过才能继续行驶。

// 同步编程示例
console.log("任务1");
console.log("任务2");
console.log("任务3");

而在异步编程中，代码不会按照顺序执行，而是通过事件循环来处理。当触发一个事件（例如用户点击按钮）时，JavaScript会将该事件添加到事件队列中。然后，事件循环会从队列中取出事件并执行相应的回调函数。这就好比在一个有多个车道的公路中，汽车可以同时行驶在不同的车道上，互不干扰。

// 异步编程示例
document.addEventListener("click", function() {
  console.log("任务1");
});

console.log("任务2");

setTimeout(function() {
  console.log("任务3");
}, 1000);

JS中的事件循环

事件循环是JavaScript用来处理事件的一种机制。它是一个不断循环的过程，会不断从事件队列中取出事件并执行相应的回调函数。当队列中没有事件时，事件循环会等待新的事件被触发。

事件循环的示意图如下：

+-----------------+
| Event Queue    |
+-----------------+
     |
     v
+-----------------+
| Event Loop      |
+-----------------+
     |
     v
+-----------------+
| Callback Queue  |
+-----------------+

JS中的事件捕获和事件冒泡

事件捕获和事件冒泡是JavaScript事件机制的两个重要概念。

  • 事件捕获： 当事件从父元素传播到子元素时，事件捕获会首先触发。也就是说，当事件发生时，它会先从最外层的父元素开始传播，然后依次传播到子元素。

  • 事件冒泡： 当事件从子元素传播到父元素时，事件冒泡会首先触发。也就是说，当事件发生时，它会先从最内层的子元素开始传播，然后依次传播到父元素。

事件捕获和事件冒泡的示意图如下：

+--------------------+
| Parent Element    |
+--------------------+
     |
     v
+--------------------+
| Child Element 1   |
+--------------------+
     |
     v
+--------------------+
| Child Element 2   |
+--------------------+

  • 事件捕获： 当事件发生时，它会首先触发Parent Element的事件处理函数，然后依次触发Child Element 1和Child Element 2的事件处理函数。

  • 事件冒泡： 当事件发生时，它会首先触发Child Element 2的事件处理函数，然后依次触发Child Element 1和Parent Element的事件处理函数。

通过本文，我们对JavaScript的事件机制有了基本的了解。这些概念在JavaScript开发中非常重要，希望您能融会贯通。