JS的事件处理

目录

  • js事件流
    • 理解
  • 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 代码时,应该尽可能避免长时间的同步操作,而是使用异步操作,以保证应用程序的性能和响应速度。

你可能感兴趣的:(javascript,开发语言,ecmascript)