js事件机制、事件循环机制和原理

一只理智恩

已于 2024-02-13 13:46:05 修改

阅读量1.2k

点赞数 28

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2024-02-13 13:30:45 首次发布

本文链接：https://blog.csdn.net/qq_53742640/article/details/136106490

版权

js 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1.js事件机制

javaScript的事件机制是一种允许开发者在用户与网页进行交互时触发特定功能的方法。事件机制主要包括三部分：事件监听器、事件处理程序和事件对象

1、事件监听器：

通过使用 addEventListener 方法，你可以告诉浏览器在特定事件发生时执行某个函数。例如，当用户点击一个按钮时，可以添加一个点击事件监听器来执行特定的函数。

button.addEventListener('click', handleClick);

2、事件处理程序

当特定事件发生时，事件处理程序（在上面的例子中是 handleClick 函数）将会被执行。这个函数通常会接收一个事件对象作为参数。

function handleClick(event) {  
  console.log('Button was clicked!');  
}

3、事件对象

当事件发生时，浏览器会创建一个包含有关该事件信息的事件对象。这个对象包含了与事件相关的各种信息，比如触发事件的元素、事件类型、鼠标位置等。通过在事件处理程序中接收这个对象，开发者可以获取关于事件的详细信息。

事件处理程序可以阻止事件的默认行为，也可以阻止事件冒泡。默认行为是指当某个事件发生时，浏览器会自动执行的一些操作。例如，当用户点击一个链接时，浏览器会自动尝试导航到链接的 URL。如果开发者希望阻止默认行为，可以在事件处理程序中调用 event.preventDefault() 方法。

同时，当一个事件发生时，它不仅会触发直接的目标元素的事件处理程序，还会向上冒泡，触发其父元素的相应事件处理程序。开发者可以通过设置 event.stopPropagation() 来阻止事件冒泡。

2.js事件循环机制

JavaScript的事件循环机制是用于处理异步操作的一种执行模型。它负责管理JavaScript运行时环境中的任务队列，并确保任务按照特定的顺序执行。

事件循环的基本原理：

JavaScript运行时环境维护一个执行栈（call stack），用于存储函数调用的上下文。当调用一个函数时，该函数的上下文被推入执行栈，执行完毕后被弹出。
JavaScript运行时环境还维护一个任务队列（task queue）用于存储异步任务。异步任务可以包括定时器回调、事件监听器、Promise的回调等。
当执行栈为空时，事件循环开始工作。它会不断地从任务队列中取出任务，将其推入执行栈中执行。
执行栈中的任务执行完毕后，事件循环继续从任务队列中取出下一个任务，重复上述过程。

事件循环机制的关键是理解事件队列中的任务的优先级。在事件队列中，任务可以分为宏任务（macrotask）和微任务（microtask）。宏任务一般包括setTimeout、setInterval等，而微任务则有process.nextTick()、Promise.then()等。在事件循环中，宏任务和微任务的执行顺序是先执行主线程，然后遇到宏队列（macrotask）放到宏队列（macrotask），遇到微队列（microtask）放到微队列（microtask），主线程执行完毕后，执行微队列（microtask），执行完毕后执行一次宏队列（macrotask）中的一个任务，然后再执行微队列（microtask），依次循环。

3.js原理

JavaScript是一种解释性语言，它可以直接在浏览器中运行，而不需要预先编译。其运行原理主要涉及到解释器、运行上下文和调用栈等概念。

解释器：JavaScript的解释器（JS Engine）主要负责对JS代码进行词法、语法等分析，通过编译器将代码编译成可执行的机器码让计算机去执行。
运行上下文：在JavaScript中，每当函数被调用时，就会为其创建一个新的上下文。上下文是一个对象，它包含了函数的变量、参数、局部变量、函数声明和this关键字等信息。当函数执行完毕后，它的上下文就会被销毁。
调用栈：调用栈是一种数据结构，它用于存储正在执行的函数的信息。每当一个函数被调用时，它就会被推入调用栈；当函数执行完毕后，它就会被弹出调用栈。
事件循环：JavaScript采用事件循环的方式来处理异步操作。事件循环包括一个事件队列和一个任务队列。当异步事件（如定时器、Ajax请求等）完成后，它们会被添加到事件队列中。然后，事件循环会依次执行任务队列中的任务和事件队列中的事件。
闭包：在JavaScript中，闭包是一种函数，它有权访问其自己的范围以及外部函数的变量。这意味着即使外部函数的执行上下文已经销毁，闭包仍然可以访问和修改这些变量。

拓展：闭包的应用场景

封装私有变量和函数：当你有一些变量或函数需要在全局作用域之外被访问，但同时需要保护这些变量不被外部直接访问时，你可以使用闭包。
维护变量的生命周期：当你的变量需要在函数执行结束后仍然保持其值时，你可以使用闭包。闭包可以确保在函数执行结束后，其内部作用域中的变量不会被垃圾回收机制回收。
实现高阶函数：闭包可以用于实现高阶函数，即返回一个函数的函数。这在许多编程场景中非常有用，例如在函数式编程或异步编程中。
模拟块级作用域：在一些需要模拟块级作用域的场景中，闭包可以非常有用。例如，当你需要创建一组具有互相关联的变量，但又不希望这些变量被外部访问时，你可以使用闭包。
实现回调函数和事件处理程序：在异步编程中，闭包可以用于处理回调函数和事件处理程序。闭包可以保持对外部变量的访问，并在事件触发时访问这些变量。
模块化：闭包也可以用于实现模块化。通过封装函数和变量，并通过外部接口暴露一些变量和函数，你可以组织代码，使其更易于维护和管理。