具体说说javascript

Promise是一种处理异步操作的机制，可以让代码更加清晰和易于阅读。当一个Promise被创建时，它处于Pending（等待）状态。在Promise对象的回调函数中，可以执行异步操作，例如Ajax请求，文件读取等。当这些操作完成时，Promise会从Pending状态转变为Fulfilled（成功）状态或Rejected（失败）状态。 而async/await是一个基于Promise机制的语法糖，可以使异步操作的代码更加简短和易于理解。async关键字放在函数前面，表示该函数是一个异步函数，await关键字则可以在异步函数中等待Promise的返回结果。使用async/await可以更加直观地处理异步操作，使代码更易于维护和调试。

### JavaScript 事件模型详解 #### 1. **JavaScript 的三种主要事件类型** JavaScript 中的事件可以分为以下三大类[^1]: - **鼠标事件**: 这些事件与用户的鼠标操作有关，例如 `click`、`mouseover` 和 `mouseout`。 - **键盘事件**: 当用户通过键盘输入数据时触发这些事件，常见的有 `keydown`、`keyup` 和 `keypress`。 - **HTML 事件**: 它们是由特定的 HTML 元素引发的事件，比如表单提交 (`submit`) 或页面加载完成 (`load`)。 --- #### 2. **JavaScript 的两种事件模型** ##### (1) **DOM0 级事件模型** 这是最早的事件绑定方式，在现代开发中仍然被广泛支持。它允许开发者直接为某个元素设置事件处理函数。 示例代码如下： ```javascript var button = document.getElementById('myButton'); button.onclick = function() { console.log('按钮被点击了！'); }; ``` 这种方式的特点是简单易用，但存在一些局限性：每个元素只能绑定一个同类型的事件处理器。如果尝试再次赋值，则会覆盖之前的事件处理器[^1]。 ##### (2) **DOM2 级事件模型** 为了克服 DOM0 模型的不足之处，引入了更灵活的方式——使用 `addEventListener()` 方法来注册多个监听器。此方法不会相互干扰或覆盖已有的事件处理器。语法结构如下所示： ```javascript var button = document.getElementById('myButton'); // 添加事件监听器 button.addEventListener('click', function(event) { console.log('第一个 click 处理程序运行...'); }, false); button.addEventListener('click', function(event) { console.log('第二个 click 处理程序也执行了...'); }, false); ``` 第三个参数决定了是否采用捕获模式，默认值为 `false`(表示处于冒泡阶段)[^3]。 --- #### 3. **JavaScript 的事件流模型** 当文档中的某一部分发生了一个事件时，该事件会在整个 DOM 树上按照一定顺序传播开来。这种机制被称为 *事件流* 。主要包括以下几个阶段[^2]: - **事件捕获(Capturing)** : 从最顶层节点开始向下传递直到目标元素所在位置； - **目标(Target Phase)** ：到达实际的目标对象本身； - **事件冒泡(Bubbling)** ：再沿相反方向逐层返回到根部； 具体流程可以用下面的例子说明: 假设有一个嵌套关系如下的 HTML 结构: ```html <div id="outer"> Outer Div <div id="inner">Inner Div</div> </div> ``` 如果我们分别给这两个 div 设置不同的 click 事件响应逻辑，并开启捕获选项的话， 那么当我们点击 innerDiv 时候会发生什么呢？ 答案是从 window 开始依次经过 body -> outer -> inner （即进入 Capturing 阶段），接着才是 Target 自身的操作最后又按原路退回形成 Bubbling 效果. --- #### 4. **阻止事件冒泡和默认行为的方法** 有时候我们可能并不希望某些事件继续向上传递或者自动执行其预定义动作。这时可以通过调用 Event 对象上的两个重要方法实现控制目的: - **stopPropagation():** 停止当前正在发生的事件进一步沿着 DOM 层级向上/下移动. - **preventDefault():** 取消浏览器对于这个特殊事件原本打算采取的行为（像链接跳转之类的） 举个例子来说吧, 假如我们的网页里有个超链接标签 `<a href='https://example.com'>Go To Example</a>` ，但是现在想让用户停留在本页而不是真的访问那个网址地址。于是可以在关联的 JS 文件里面这样写: ```javascript document.querySelector('a').addEventListener('click',function(e){ e.preventDefault(); // 不让页面重定向至指定URL }); ``` 同样地，如果你不想子组件内的点击影响父容器的状态更新也可以这样做: ```javascript childElement.addEventListener('mousedown',function(evt){ evt.stopPropagation(); },true); ``` 以上就是关于 JavaScript 中几种常见事件及其工作原理的大致介绍啦！ --- ###