JS的事件处理

js事件流

理解

JavaScript事件流(Even loop),英文记住，它指的是浏览器处理时间的方式，描述页面处理事件的顺序。

在JavaScript中，事件流分为三个阶段：捕获阶段，目标阶段，冒泡阶段。这三个阶段是从外到内，从父结点到子节点，再从子节点到父节点的顺序一次发生。

展开描述一下事件流的三个阶段：

1. 捕获阶段:事件从最外层节点(文档对象)开始，逐级向下传播，直到达到事件的目标节点。
2. 目标阶段:事件到达目标节点，在目标元素上触发，触发目标节点上的事件处理函数。
3. 冒泡阶段：时间从目标节点开始，逐级向上传播，直到达到最外层的节点(文档对象)

另外在事件流中，事件的传播过程可以被停止或取消，在事件处理函数中，可以使用even.stopPropagation()方法阻止事件的进一步传播，或者用even.prevenDefault()方法取消事件的默认行为。

js事件轮询机制

理解

JavaScript事件轮询(Even Loop)是处理异步操作和执行回调函数的核心机制，是浏览器渲染主进程的工作方式。

在浏览器中，JavaScript事件轮询机制由浏览器的事件循环负责执行，它会不断地轮询任务队列，并将队列中的任务依次执行。

JavaScript中的任务可以简单分为两类：宏任务和微任务，
宏任务通常包括一些需要花费较长时间的操作，例如定时器、事件回调等等。当一个宏任务执行完毕后，JavaScript 引擎会检查是否存在未执行的微任务，如果存在，则立即执行这些微任务。在所有微任务执行完毕后，JavaScript 引擎会再次开始执行宏任务。

微任务通常包括一些需要尽快执行的操作，例如 Promise 的回调函数、MutationObserver 的回调函数等等。微任务可以使用 Promise 对象的 then() 方法或者 MutationObserver 的 observe() 方法注册。

在 JavaScript 中，事件轮询机制的执行顺序如下：

1. 执行当前宏任务中的同步代码，直到遇到第一个宏任务或微任务。
2. 如果遇到微任务，则将它添加到微任务队列中，继续执行下一个同步代码。
3. 如果遇到宏任务，则将它添加到宏任务队列中，继续执行下一个同步代码。
4. 当前微任务或者宏任务执行完毕后，JavaScript 引擎会检查微任务或宏任务队列是否为空。如果不为空，则执行队列中的第一个任务，重复执行该步骤直到任务队列为空。
5. 当前事件轮询结束，等待下一次事件的触发。

需要注意一点，JavaScript 中的事件轮询机制是单线程的，也就是说，所有任务都是在同一个线程中执行的，不能同时执行两个任务。如果当前宏任务执行的时间太长，会阻塞其它宏任务的执行，从而导致应用程序的性能问题。因此，在编写 JavaScript 代码时，应该尽可能避免长时间的同步操作，而是使用异步操作，以保证应用程序的性能和响应速度。