mdn · yin1999 · Jul 27, 2024 · Jul 26, 2024
@@ -15,7 +15,8 @@ slug: Web/API/EventTarget/addEventListener
 
 `addEventListener()` 的工作原理是将实现 {{domxref("EventListener")}} 的函数或对象添加到调用它的 {{domxref("EventTarget")}} 上的指定事件类型的事件侦听器列表中。如果要绑定的函数或对象已经被添加到列表中，该函数或对象不会被再次添加。
 
-> **备注：** 如果先前向事件侦听器列表中添加过一个匿名函数，并且在之后的代码中调用 `addEventListener` 来添加一个功能完全相同的匿名函数，那么之后的这个匿名函数*也会*被添加到列表中。
+> [!NOTE]
+> 如果先前向事件侦听器列表中添加过一个匿名函数，并且在之后的代码中调用 `addEventListener` 来添加一个功能完全相同的匿名函数，那么之后的这个匿名函数*也会*被添加到列表中。
 >
 > 实际上，即使使用*完全相同*的代码来定义一个匿名函数，这两个函数仍然存在区别，**在循环中也是如此**。在使用该方法的情况下，匿名函数的重复定义会带来许多麻烦，详见下文中的[内存问题](#内存问题)一节。
 
@@ -52,7 +53,8 @@ addEventListener(type, listener, useCapture);
 
   - : 一个布尔值，表示在 DOM 树中注册了 `listener` 的元素，是否要先于它下面的 `EventTarget` 调用该 `listener`。当 useCapture（设为 true）时，沿着 DOM 树向上冒泡的事件不会触发 listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 [DOM Level 3 事件](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)及 [JavaScript 事件顺序](https://www.quirksmode.org/js/events_order.html#link4)文档。如果没有指定，`useCapture` 默认为 `false`。
 
-    > **备注：** 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器会在任何非捕获阶段的事件监听器之前被调用。
+    > [!NOTE]
+    > 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器会在任何非捕获阶段的事件监听器之前被调用。
 
 - `wantsUntrusted` {{optional_inline}} {{Non-standard_inline}}
   - : 如果为 `true`，则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko（{{glossary("chrome")}} 的默认值为 `false`，其他常规网页的默认值为 `true`），主要用于附加组件的代码和浏览器本身。
@@ -639,13 +641,15 @@ myButton.addEventListener("click", () => {
 console.log(someString); // 预期输出：'Data'（不可能是 'Data Again'）
 ```
 
-> **备注：** 虽然内部作用域可以访问到外部 `const` 和 `let` 所声明的变量，但你在事件监听器内对变量所做的任何修改都不能在外部作用域内体现。为什么呢？因为在事件监听器被执行时，其外部作用域已经执行完毕了。
+> [!NOTE]
+> 虽然内部作用域可以访问到外部 `const` 和 `let` 所声明的变量，但你在事件监听器内对变量所做的任何修改都不能在外部作用域内体现。为什么呢？因为在事件监听器被执行时，其外部作用域已经执行完毕了。
 
 #### 使用对象进行数据交换
 
 与 JavaScript 中的大部分函数不同，一个对象只要有被引用计数，它就会一直存在于内存之中。并且，对象可以拥有自己的属性，属性又可以被引用形式传递，使得它有潜力成为在作用域间传值的候选。让我们来试试。
 
-> **备注：** 实际上，在 JavaScript 中，函数也是对象的一种。（因此，函数也可以有自己的对象，甚至可以在其执行结束后依旧存在于内存中，只要将其分配到一个永久存在于内存中的变量即可。）
+> [!NOTE]
+> 实际上，在 JavaScript 中，函数也是对象的一种。（因此，函数也可以有自己的对象，甚至可以在其执行结束后依旧存在于内存中，只要将其分配到一个永久存在于内存中的变量即可。）
 
 因为只需一个变量引用就可以使对象的属性将数据存储在内存之中，你可以使用它与事件监听器进行数据交换，并且更改后的数据会被保留。请看下面这个例子：
 
@@ -669,9 +673,11 @@ setInterval(() => {
 
 在这一例子中，虽然事件监听器和定时函数的作用域都在 `someObject.aProperty` 的值变更前执行完毕，但 `someObject` 仍被事件监听器和定时函数所*引用*而存在于内存中，这两个函数依然能访问到同样的数据（也就是说，当其中一方改变了数据，另一方可以对这一改变做出响应）。
 
-> **备注：** 对象的是以引用方式存储于变量中的，也即变量中存储的只是对象的内存地址而已。在其他方面上，这也意味着“存储”这个对象的变量可以对其他引用（或“存储”）同一个对象的变量产生影响。当两个变量引用同一对象时（比如 `let a = b = {aProperty: 'Yeah'};`），仅对其中一个变量进行更改仍然会影响到另一个变量。
+> [!NOTE]
+> 对象的是以引用方式存储于变量中的，也即变量中存储的只是对象的内存地址而已。在其他方面上，这也意味着“存储”这个对象的变量可以对其他引用（或“存储”）同一个对象的变量产生影响。当两个变量引用同一对象时（比如 `let a = b = {aProperty: 'Yeah'};`），仅对其中一个变量进行更改仍然会影响到另一个变量。
 
-> **备注：** 基于对象存储于变量中的“引用”逻辑，你可以在一个函数执行完毕后返回一个对象以使其“保活”（使其保留在内存中且不丢失数据）。
+> [!NOTE]
+> 基于对象存储于变量中的“引用”逻辑，你可以在一个函数执行完毕后返回一个对象以使其“保活”（使其保留在内存中且不丢失数据）。
 
 ### 内存问题
 
@@ -737,7 +743,8 @@ window.addEventListener(
 
 为了避免这一问题，大部分浏览器（Safari 和 Internet Explorer 除外）将文档级节点 {{domxref("Window")}}、{{domxref("Document")}} 和 {{domxref("Document.body")}} 上的 {{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}} 和 {{domxref("Element/touchmove_event", "touchmove")}} 事件的 `passive` 默认值更改为 `true`。如此，事件监听器便不能[取消事件](/zh-CN/docs/Web/API/Event/preventDefault)，也不会在用户滚动页面时阻止页面呈现。
 
-> **备注：** 若你想要了解哪些浏览器（或特定浏览器的哪一个版本）具体实现了上述功能，请参见下方的浏览器兼容性表。
+> [!NOTE]
+> 若你想要了解哪些浏览器（或特定浏览器的哪一个版本）具体实现了上述功能，请参见下方的浏览器兼容性表。
 
 因此，当你想要覆盖这一行为并确认 `passive` 在所有浏览器中都被设为 `false`，你必须显式地将其设为 `false`，而不是依赖浏览器的默认设置。
 

@@ -9,7 +9,8 @@ slug: Web/API/EventTarget/dispatchEvent
 
 调用 `dispatchEvent()` 是*触发一个事件*的最后一步。被触发的事件应事先通过 {{domxref("Event/Event", "Event()")}} 构造函数创建并初始化完毕。
 
-> **备注：** 在调用此方法时，{{domxref("Event.target")}} 属性默认为当前的 `EventTarget`。
+> [!NOTE]
+> 在调用此方法时，{{domxref("Event.target")}} 属性默认为当前的 `EventTarget`。
 
 和经由浏览器触发，并通过[事件循环](/zh-CN/docs/Web/JavaScript/Event_loop)异步调用事件处理程序的“原生”事件不同，`dispatchEvent()` 会*同步*调用事件处理函数。在 `dispatchEvent()` 返回之前，所有监听该事件的事件处理程序将在代码继续前执行并返回。
 
@@ -33,7 +34,8 @@ dispatchEvent(event)
 - `InvalidStateError` {{domxref("DomException")}}
   - : 若事件未在初始化时指定类型（`type` 属性值），则抛出此异常。
 
-> **警告：** 由事件处理程序抛出的异常视为未被捕获的异常。事件处理程序运行在一个嵌套的调用栈中；在其处理完毕前将阻塞 `caller`，但异常却不会冒泡至 `caller`。
+> [!WARNING]
+> 由事件处理程序抛出的异常视为未被捕获的异常。事件处理程序运行在一个嵌套的调用栈中；在其处理完毕前将阻塞 `caller`，但异常却不会冒泡至 `caller`。
 
 ## 示例
 

@@ -7,7 +7,8 @@ slug: Web/API/EventTarget/EventTarget
 
 **`EventTarget()`** 构造方法将会创建一个新的 {{domxref("EventTarget")}} 对象实例。
 
-> **备注：** 需要显式调用这一构造函数的情况极为少见。在大多数情况下，这一函数是在继承了 {{domxref("EventTarget")}} 类的构造函数中被 [`super`](/zh-CN/docs/Web/JavaScript/Reference/Operators/super) 所调用的。
+> [!NOTE]
+> 需要显式调用这一构造函数的情况极为少见。在大多数情况下，这一函数是在继承了 {{domxref("EventTarget")}} 类的构造函数中被 [`super`](/zh-CN/docs/Web/JavaScript/Reference/Operators/super) 所调用的。
 
 ## 语法
 

@@ -11,7 +11,8 @@ slug: Web/API/EventTarget/removeEventListener
 
 如果一个 {{domxref("EventTarget")}} 上的[事件监听器](/zh-CN/docs/Web/API/EventTarget/addEventListener#事件监听回调)在另一监听器处理该事件时被移除，那么它将不能被事件触发。不过，它可以被重新绑定。
 
-> **警告：** 如果同一个事件监听器分别为“事件捕获（`capture` 为 `true`）”和“事件冒泡（`capture` 为 `false`）”注册了一次，这两个版本的监听器需要分别移除。移除捕获监听器不会影响非捕获版本的相同监听器，反之亦然。
+> [!WARNING]
+> 如果同一个事件监听器分别为“事件捕获（`capture` 为 `true`）”和“事件冒泡（`capture` 为 `false`）”注册了一次，这两个版本的监听器需要分别移除。移除捕获监听器不会影响非捕获版本的相同监听器，反之亦然。
 
 还有一种移除事件监听器的方法：可以向 {{domxref("EventTarget/addEventListener()", "addEventListener()")}} 传入一个 {{domxref("AbortSignal")}}，稍后再调用拥有该事件的控制器上的 {{domxref("AbortController/abort()", "abort()")}} 方法即可。
 

@@ -9,7 +9,8 @@ slug: Web/API/EXT_float_blend
 
 若要查询该扩展是否存在，可以用方法：{{domxref("WebGLRenderingContext.getExtension()")}}。更多信息可以参考 [WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial) 中的 [Using Extensions](/zh-CN/docs/Web/API/WebGL_API/Using_Extensions)。
 
-> **备注：** 该扩展在 {{domxref("WebGLRenderingContext", "WebGL1")}} 和{{domxref("WebGL2RenderingContext", "WebGL2")}} 上下文中均存在。但是，要使用它，你需要启用对 32 位浮点绘制缓冲区的使用{{domxref("WEBGL_color_buffer_float")}}（for WebGL1）或 {{domxref("EXT_color_buffer_float")}}（WebGL2）。通过启用 32 位浮点缓冲区扩展，将自动启用`EXT_float_blend`。
+> [!NOTE]
+> 该扩展在 {{domxref("WebGLRenderingContext", "WebGL1")}} 和{{domxref("WebGL2RenderingContext", "WebGL2")}} 上下文中均存在。但是，要使用它，你需要启用对 32 位浮点绘制缓冲区的使用{{domxref("WEBGL_color_buffer_float")}}（for WebGL1）或 {{domxref("EXT_color_buffer_float")}}（WebGL2）。通过启用 32 位浮点缓冲区扩展，将自动启用`EXT_float_blend`。
 
 该组件启用后，使用 32 位浮点数混合方式绘制，调用 {{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}} 或 {{domxref("WebGLRenderingContext.drawElements", "drawElements()")}} 时，将不再产生 `INVALID_OPERATION` 异常。
 

@@ -7,13 +7,15 @@ slug: Web/API/ExtendableEvent
 
 作为 service worker 生命周期的一部分，**`ExtendableEvent`** 接口延长了在全局范围上 [`install`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/install_event) 和 [`activate`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event) 事件的生命周期。这样可以确保在升级数据库架构并删除过时的 caches 之前，不会调度任何函数事件（如{{domxref("FetchEvent")}}）。如果在`ExtendableEvent`处理程序之外调用{{domxref("ExtendableEvent.waitUntil","waitUntil()")}}，浏览器应该抛出一个`InvalidStateError`；还要注意，多个调用将堆积起来，结果 promises 将添加到[extend lifetime promises](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises).
 
-> **备注：** 上述段落中描述的行为在 firefox 43 中得到了修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
+> [!NOTE]
+> 上述段落中描述的行为在 firefox 43 中得到了修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
 
 此接口继承自{{domxref("Event")}}接口。
 
 {{InheritanceDiagram(700, 60, 20)}}
 
-> **备注：** 只有当全局范围是 {{domxref("ServiceWorkerGlobalScope")}} 时，此接口才可用。当它是一个 {{domxref("Window")}} 或其他类型 worker 的作用域时，它不可用。
+> [!NOTE]
+> 只有当全局范围是 {{domxref("ServiceWorkerGlobalScope")}} 时，此接口才可用。当它是一个 {{domxref("Window")}} 或其他类型 worker 的作用域时，它不可用。
 
 ## 构造函数
 
@@ -37,7 +39,8 @@ _从他的父辈继承，{{domxref("Event")}}。_
 
 代码段还显示了对 service worker 使用的缓存进行版本控制的最佳实践。虽然在这个例子中只有一个缓存，但是相同的方法可以用于多个缓存。它将缓存的速记标识符映射到特定的、版本化的缓存名称。
 
-> **备注：** 在 chrome 中，日志记录语句通过 chrome://service worker internals 访问的相关服务工作者的“inspect”接口可见。
+> [!NOTE]
+> 在 chrome 中，日志记录语句通过 chrome://service worker internals 访问的相关服务工作者的“inspect”接口可见。
 
 ```js
 var CACHE_VERSION = 1;
@@ -78,7 +81,8 @@ self.addEventListener("install", function (event) {
 });
 ```
 
-> **备注：** 在获取资源时，如果有可能资源是由不支持 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 的服务器提供的，那么使用 `{mode: 'no-cors'}` 非常重要。在本例中， [www.chromium.org](http://www.chromium.org) 不支持 CORS。
+> [!NOTE]
+> 在获取资源时，如果有可能资源是由不支持 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 的服务器提供的，那么使用 `{mode: 'no-cors'}` 非常重要。在本例中， [www.chromium.org](http://www.chromium.org) 不支持 CORS。
 
 ## 规范
 

@@ -13,7 +13,8 @@ slug: Web/API/ExtendableEvent/waitUntil
 
 `waitUntil()` 方法最初必须在事件回调里调用，在此之后，方法可以被调用多次，直至所有传入的 promise 被解决。
 
-> **备注：** 上述段落描述的行为已经在 Firefox 43 中被修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
+> [!NOTE]
+> 上述段落描述的行为已经在 Firefox 43 中被修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
 
 ## 语法
 

@@ -33,7 +33,8 @@ Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}}（以及
   - [2018 年 4 月](https://github.com/whatwg/fetch/pull/585)，该规范将默认的 credentials 策略更改为 `'same-origin'`。以下浏览器发布了过时的原生 fetch，并在以下版本中更新：Firefox 61.0b13、Safari 12、Chrome 68。
   - 如果你的目标是这些旧的浏览器，请务必在所有可能接受 cookie/用户登录状态影响的 API 请求中包含拥有 `credentials: 'same-origin'` 的 [init 对象](/zh-CN/docs/Web/API/fetch#参数)。
 
-> **备注：** 更多关于 Fetch API 的用法，参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)。
+> [!NOTE]
+> 更多关于 Fetch API 的用法，参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)。
 
 ### 中止 fetch
 

@@ -78,9 +78,11 @@ fetch("https://example.com", {
 });
 ```
 
-> **备注：** 当请求使用 `credentials: 'include'` 时，响应的 `Access-Control-Allow-Origin` 不能使用通配符 "`*`"。在这种情况下，`Access-Control-Allow-Origin` 必须是当前请求的源，在使用 CORS Unblock 插件的情况下请求仍会失败。
+> [!NOTE]
+> 当请求使用 `credentials: 'include'` 时，响应的 `Access-Control-Allow-Origin` 不能使用通配符 "`*`"。在这种情况下，`Access-Control-Allow-Origin` 必须是当前请求的源，在使用 CORS Unblock 插件的情况下请求仍会失败。
 
-> **备注：** 无论怎么设置，浏览器都不应在 _预检请求_ 中发送凭据。了解更多：[跨域资源共享 > 附带身份凭证的请求](/zh-CN/docs/Web/HTTP/CORS#附带身份凭证的请求)
+> [!NOTE]
+> 无论怎么设置，浏览器都不应在 _预检请求_ 中发送凭据。了解更多：[跨域资源共享 > 附带身份凭证的请求](/zh-CN/docs/Web/HTTP/CORS#附带身份凭证的请求)
 
 如果你只想在请求 URL 与调用脚本位于同一起源处时发送凭据，请添加 `credentials: 'same-origin'`。
 
@@ -349,7 +351,8 @@ fetch(myRequest)
 - `response`：从 response 中获得的 headers（{{domxref("Response.headers")}}）只读。
 - `immutable`：在 ServiceWorkers 中最常用的，所有的 headers 都只读。
 
-> **备注：** 你不可以添加或者修改一个 guard 属性是 `request` 的 Request Header 的 `Content-Length` 属性。同样地，插入 `Set-Cookie` 属性到一个 response header 是不允许的，因此，Service Worker 中，不能给合成的 Response 设置 cookie。
+> [!NOTE]
+> 你不可以添加或者修改一个 guard 属性是 `request` 的 Request Header 的 `Content-Length` 属性。同样地，插入 `Set-Cookie` 属性到一个 response header 是不允许的，因此，Service Worker 中，不能给合成的 Response 设置 cookie。
 
 ## Response 对象
 
@@ -378,7 +381,8 @@ addEventListener("fetch", (event) => {
 
 {{domxref("Response.Response","Response()")}} 构造方法接受两个可选参数——response 的 body 和一个初始化对象（与{{domxref("Request.Request","Request()")}} 所接受的 init 参数类似）。
 
-> **备注：** 静态方法 {{domxref("Response.error","error()")}} 只是返回了错误的 response。与此类似地，{{domxref("Response.redirect","redirect()")}} 只是返回了一个可以重定向至某 URL 的 response。这些也只与 Service Worker 有关。
+> [!NOTE]
+> 静态方法 {{domxref("Response.error","error()")}} 只是返回了错误的 response。与此类似地，{{domxref("Response.redirect","redirect()")}} 只是返回了一个可以重定向至某 URL 的 response。这些也只与 Service Worker 有关。
 
 ## Body
 

@@ -383,7 +383,8 @@ function handleFiles() {
 
 此示例展示了如何让用户将文件（例如使用上一个示例选择的图像）上传到服务器。
 
-> **备注：** 通常最好使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 而不是 {{domxref("XMLHttpRequest")}} 发起 HTTP 请求。但是，在这种情况下，我们想向用户显示上传进度，而 Fetch API 仍然不支持此特性，因此示例使用 `XMLHttpRequest`。使用 Fetch API 跟踪进度通知标准化的工作位于 <https://github.com/whatwg/fetch/issues/607>。
+> [!NOTE]
+> 通常最好使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 而不是 {{domxref("XMLHttpRequest")}} 发起 HTTP 请求。但是，在这种情况下，我们想向用户显示上传进度，而 Fetch API 仍然不支持此特性，因此示例使用 `XMLHttpRequest`。使用 Fetch API 跟踪进度通知标准化的工作位于 <https://github.com/whatwg/fetch/issues/607>。
 
 ### 创建上传任务