- event.originalTarget event.originalTarget
Date: Tue, 2 Jul 2024 07:50:22 +0000
Subject: [PATCH 3/5] separate bubbling and event main docs
---
.../building_blocks/event_bubbling/index.md | 538 +++++++++++-------
.../building_blocks/events/index.md | 357 +-----------
2 files changed, 348 insertions(+), 547 deletions(-)
diff --git a/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md
index 12ea97f72f308c..5c6311e9a2771f 100644
--- a/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md
@@ -5,206 +5,360 @@ slug: Learn/JavaScript/Building_blocks/Event_bubbling
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
-### Event targets
-
-It's easy to get confused about which target to examine when writing an event handler. This article should clarify the use of the target properties.
-
-There are 5 targets to consider:
-
-
-
-
- Property
- Defined in
- Purpose
-
-
- event.target
- DOM Event Interface
-
-
-
- The DOM element on the lefthand side of the call that triggered this
- event, eg:
-
- element .dispatchEvent(event )
-
-
-
- event.currentTarget
- DOM Event Interface
-
-
- The
- EventTargetEventListeners
-
-
- event.relatedTarget
- DOM MouseEvent Interface
-
- Identifies a secondary target for the event.
-
-
-
- event.explicitOriginalTarget
-
-
- Event.webidl
-
-
- {{ Non-standard_inline() }} If the event was retargeted for
- some reason other than an anonymous boundary crossing, this will be set
- to the target before the retargeting occurs. For example, mouse events
- are retargeted to their parent node when they happen over text nodes
- ([Firefox bug 185889](https://bugzil.la/185889)), and in that case .target will
- show the parent and .explicitOriginalTarget will show the
- text node..originalTarget,
- .explicitOriginalTarget will never contain anonymous
- content.
-
-
-
- event.originalTarget
- Event.webidl
-
-
- {{ Non-standard_inline() }} The original target of the event,
- before any retargetings. See
- Anonymous Content#Event_Flow_and_Targeting
- for details.
-
-
-
-
-
-### Use of `explicitOriginalTarget` and `originalTarget`
-
-TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?
-
-### Examples
-
-```
-
-
-
- Comparison of Event Targets
-
-
+## 事件冒泡
+
+事件冒泡描述了浏览器如何处理针对嵌套元素的事件。
+
+### 在父元素上设置监听器
+
+考虑像这样的网页：
+
+```html
+
+ 点我！
+
+` 元素是其中包含元素的**父元素**。当我们在父元素附加单击事件处理器，并点击按钮时，会发生什么？
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+ output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('在父元素上设置监听器', '100%', 200, "", "") }}
+
+你会发现在用户单击按钮时，父元素上触发了单击事件：
+
+```
+你在 DIV 元素上进行了点击
+```
+
+这是有道理的：按钮在 `
` 里面，所以当你点击按钮的时候，你也隐含地点击了它所在的元素。
+
+### 冒泡示例
+
+如果在按钮*及*其父元素上同时添加事件处理器，会发生什么？
+
+```html
+
+
+ 点我！
+
+
+
+```
+
+让我们试着给按钮、它的父元素（`
`）以及包含它们的 {{HTMLElement("body")}} 元素添加点击事件处理器：
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+ output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('冒泡', '100%', 200, "", "") }}
+
+你会发现在用户单击按钮时，所有三个元素都触发了单击事件：
+
+```
+你在 BUTTON 元素上进行了点击
+你在 DIV 元素上进行了点击
+你在 BODY 元素上进行了点击
+```
+
+在这种情况下：
+
+- 最先触发按钮上的单击事件
+- 然后是按钮的父元素（`
` 元素）
+- 然后是 `
` 的父元素（`` 元素）
+
+我们可以这样描述：事件从被点击的最里面的元素**冒泡**而出。
+
+这种行为可能是有用的，也可能引起意想不到的问题。在接下来的章节中，我们将看到它引起的一个问题，并找到解决方案。
+
+### 视频播放器示例
+
+在这个示例中，我们的页面包含一个视频，最初它为隐藏状态；还有一个标记为“显示视频”的按钮。我们希望有如下交互：
+
+- 当用户单击“显示视频”按钮时，显示包含视频的盒子，但不要开始播放视频。
+- 当用户在视频上单击时，开始播放视频。
+- 当用户单击盒子内视频以外的任何区域时，隐藏盒子。
+
+HTML 代码看起来像这样：
+
+```html
+
显示视频
+
+
+
+
+ 你的浏览器不支持 HTML 视频，这里有视频的替代链接 。
+
+
+
+```
+
+它包含：
+
+- 一个 `
` 元素
+- 一个 `` 元素，最初其包含 `class="hidden"` 属性
+- 一个嵌套在 `
` 元素中的 `
` 元素
+
+我们使用 CSS 来隐藏具有 `"hidden"` 类的元素。
+
+```css hidden
+div {
+ width: 100%;
+ height: 100%;
+ background-color: #eee;
+}
+
+.hidden {
+ display: none;
+}
+
+div video {
+ padding: 40px;
+ display: block;
+ width: 400px;
+ margin: 40px auto;
+}
+```
+
+JavaScript 代码看起来像这样：
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+video.addEventListener("click", () => video.play());
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+它添加了三个 `'click'` 事件处理器：
+
+- 一个在 `` 上，它显示了包含 `` 的 ``
+- 一个在 `
` 上，用于开始播放视频
+- 一个在 `` 上，用于隐藏视频
+
+让我们看看这个如何工作：
+
+{{ EmbedLiveSample('视频播放器示例', '100%', 500) }}
+
+你应该看到，当你点击按钮时，盒子和它所包含的视频都显示出来。但当你点击视频时，视频开始播放，但盒子又被隐藏起来了！
+
+视频在 `
` 内（是它的一部分），所以点击视频会*同时*运行两个事件处理器，导致这种行为。
+
+### 使用 stopPropagation() 修复问题
+
+正如我们在上一节所看到的，事件冒泡有时会产生问题，但有一种方法可以防止这些问题。[`Event`](/zh-CN/docs/Web/API/Event) 对象有一个可用的函数，叫做 [`stopPropagation()`](/zh-CN/docs/Web/API/Event/stopPropagation)，当在一个事件处理器中调用时，可以防止事件向任何其他元素传递。
+
+我们可以通过修改 JavaScript 代码来修复当前的问题：
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+
+video.addEventListener("click", (event) => {
+ event.stopPropagation();
+ video.play();
+});
+
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+我们在这里所做的是在 `
` 元素的 `'click'` 事件的处理器中对事件对象调用 `stopPropagation()`。这将阻止该事件向盒子内传递。现在试着点击按钮，然后再点击视频：
+
+{{EmbedLiveSample("使用 stopPropagation() 修复问题", '100%', 500)}}
+
+```html hidden
+显示视频
+
+
+
+
+ 你的浏览器不支持 HTML 视频，这里有视频的替代链接 。
+
+
+
-
-
- Original target dispatching the event event.target
- Target who's event listener is being processed event.currentTarget
- Identify other element (if any) involved in the event event.relatedTarget
- If there was a retargetting of the event for some reason event.explicitOriginalTarget contains the target before retargetting (never contains anonymous targets)
- If there was a retargetting of the event for some reason event.originalTarget contains the target before retargetting (may contain anonymous targets)
-
-
-
-
-
-Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target
-
+
+ 点我！
+
+ ` 的，最后是 `
` 的：
+
+```
+你在 BODY 元素上进行了点击
+你在 DIV 元素上进行了点击
+你在 BUTTON 元素上进行了点击
+```
+
+为什么要同时使用捕获和冒泡功能？在过去的坏日子里，当浏览器的交叉兼容性远不如现在时，Netscape 只使用事件捕捉，而 Internet Explorer 只使用事件冒泡。当 W3C 决定尝试将行为标准化并达成共识时，他们最终确定了这个包括这两种行为的系统，这也是现代浏览器所实现的。
+
+默认情况下，几乎所有的事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。
-The `relatedTarget` property for the `mouseover` event holds the node that the mouse was previously over. For the `mouseout` event, it holds the node that the mouse moved to.
+## 事件委托
-| Event type | [event.target](/zh-CN/DOM/event.target) | [event.relatedTarget](/zh-CN/DOM/event.relatedTarget) |
-| ----------- | ------------------------------------------------- | ----------------------------------------------------- |
-| `mouseover` | the EventTarget which the pointing device entered | the EventTarget which the pointing device exited |
-| `mouseout` | the EventTarget which the pointing device exited | the EventTarget which the pointing device entered |
+在上一节中，我们看了一个由事件冒泡引起的问题以及如何解决它。不过，事件冒泡并不只是令人讨厌：它可以非常有用。特别是，它可以实现**事件委托**。在这种做法中，当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时，我们在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。
-TODO: Also needs descriptions about `dragenter` and `dragexit` events.
+让我们回到第一个例子，当用户点击一个按钮时，我们设置整个页面的背景颜色。假设取而代之的是，页面被分为 16 个区域，我们想在用户点击每个区域时将其设置为随机颜色。
-#### Example
+这里是 HTML 代码：
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+我们有一些 CSS 代码，来设置每一个区域的尺寸和位置：
+
+```css
+.tile {
+ height: 100px;
+ width: 25%;
+ float: left;
+}
+```
+
+在 JavaScript 代码中，我们向每一个区域中添加单击事件处理器。但是，一个更简单、更有效的选择是在父节点上设置点击事件处理器，并依靠事件冒泡来确保用户点击每个区域时处理程序被执行：
+
+```js
+function random(number) {
+ return Math.floor(Math.random() * number);
+}
+
+function bgChange() {
+ const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
+ return rndCol;
+}
+
+const container = document.querySelector("#container");
+
+container.addEventListener("click", (event) => {
+ event.target.style.backgroundColor = bgChange();
+});
```
+
+示例输出如下（试着随便点击）：
+
+{{ EmbedLiveSample('事件委托', '100%', 430, "", "") }}
+
+> **备注：** 在这个例子中，我们使用 `event.target` 来获取事件的目标元素（也就是最里面的元素）。如果我们想访问处理这个事件的元素（在这个例子中是容器），我们可以使用 `event.currentTarget`。
+
+> **备注：** 完整的源代码见 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html)；也可以在这里[在线运行它](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)。
+
+## 技能测试！
+
+你已经到了本文的结尾，但你能记住最重要的信息吗？在你继续前进之前，要验证你是否记住了这些信息，请前往[技能测试：事件](/zh-CN/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)页面进行测试。
+
+## 结论
+
+现在你应该知道在这个早期阶段需要了解的所有 web 事件。如上所述，事件并不是 JavaScript 的核心部分——它们是在浏览器 Web API 中定义的。
+
+另外，理解 JavaScript 在不同环境下使用不同的事件模型很重要——从 Web API 到其他领域，如浏览器 WebExtensions 和 Node.js（服务器端 JavaScript）。我们并不期望现在了解所有这些领域，但是当你在学习 web 开发的过程中，理解这些事件的基础是很有帮助的。
+
+> **备注：** 如果你遇到了问题，可以向我们其中的一个[交流渠道](/zh-CN/docs/MDN/Community/Communication_channels)寻求帮助。
+
+## 参见
+
+- [domevents.dev](https://domevents.dev/)——一个非常有用的交互式游乐场应用程序，能够通过探索来学习 DOM 事件系统的行为。
+- [事件参考](/zh-CN/docs/Web/Events)
+- [事件顺序](https://www.quirksmode.org/js/events_order.html)（探讨了捕获和冒泡）——由 Peter-Paul Koch 撰写的非常详尽的文章。
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/zh-cn/learn/javascript/building_blocks/events/index.md b/files/zh-cn/learn/javascript/building_blocks/events/index.md
index 98fcb7eefbadde..79c12cbcf21e5d 100644
--- a/files/zh-cn/learn/javascript/building_blocks/events/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/events/index.md
@@ -3,7 +3,7 @@ title: 事件介绍
slug: Learn/JavaScript/Building_blocks/Events
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Event_bubbling", "Learn/JavaScript/Building_blocks")}}
事件是你正在编程的系统中发生的事情，系统会告诉你有关这些事件的信息，以便你的代码能够对它们做出反应。
@@ -300,8 +300,6 @@ btn.addEventListener("click", bgChange);
在这里，可以看到我们在函数中包括一个事件对象 `e`，并在函数中设置背景颜色样式在 `e.target` 上——它指的是按钮本身。事件对象 `e` 的 `target` 属性始终是事件刚刚发生的元素的引用。所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。
-> **备注：** 参见[事件委托](#事件委托)来了解使用 `event.target` 的示例。
-
> **备注：** 可以使用任何喜欢的名称作为事件对象——只需要选择一个名称，然后可以在事件处理函数中引用它。开发人员最常使用 `e`/`evt`/`event`，因为它们很简单易记。保持一致总是好的——至少对自己。如果可能的话，对别人也是如此。
### 事件对象的额外属性
@@ -386,344 +384,6 @@ form.addEventListener("submit", (e) => {
> **备注：** 你可以在 GitHub 上查看这个示例的完整源代码 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html)，也可以[在线运行它](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)。
-## 事件冒泡
-
-事件冒泡描述了浏览器如何处理针对嵌套元素的事件。
-
-### 在父元素上设置监听器
-
-考虑像这样的网页：
-
-```html
-
- 点我！
-
-` 元素是其中包含元素的**父元素**。当我们在父元素附加单击事件处理器，并点击按钮时，会发生什么？
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
- output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
-}
-
-const container = document.querySelector("#container");
-container.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('在父元素上设置监听器', '100%', 200, "", "") }}
-
-你会发现在用户单击按钮时，父元素上触发了单击事件：
-
-```
-你在 DIV 元素上进行了点击
-```
-
-这是有道理的：按钮在 `
` 里面，所以当你点击按钮的时候，你也隐含地点击了它所在的元素。
-
-### 冒泡示例
-
-如果在按钮*及*其父元素上同时添加事件处理器，会发生什么？
-
-```html
-
-
- 点我！
-
-
-
-```
-
-让我们试着给按钮、它的父元素（`
`）以及包含它们的 {{HTMLElement("body")}} 元素添加点击事件处理器：
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
- output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
-}
-
-const container = document.querySelector("#container");
-const button = document.querySelector("button");
-
-document.body.addEventListener("click", handleClick);
-container.addEventListener("click", handleClick);
-button.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('冒泡', '100%', 200, "", "") }}
-
-你会发现在用户单击按钮时，所有三个元素都触发了单击事件：
-
-```
-你在 BUTTON 元素上进行了点击
-你在 DIV 元素上进行了点击
-你在 BODY 元素上进行了点击
-```
-
-在这种情况下：
-
-- 最先触发按钮上的单击事件
-- 然后是按钮的父元素（`
` 元素）
-- 然后是 `
` 的父元素（`` 元素）
-
-我们可以这样描述：事件从被点击的最里面的元素**冒泡**而出。
-
-这种行为可能是有用的，也可能引起意想不到的问题。在接下来的章节中，我们将看到它引起的一个问题，并找到解决方案。
-
-### 视频播放器示例
-
-在这个示例中，我们的页面包含一个视频，最初它为隐藏状态；还有一个标记为“显示视频”的按钮。我们希望有如下交互：
-
-- 当用户单击“显示视频”按钮时，显示包含视频的盒子，但不要开始播放视频。
-- 当用户在视频上单击时，开始播放视频。
-- 当用户单击盒子内视频以外的任何区域时，隐藏盒子。
-
-HTML 代码看起来像这样：
-
-```html
-
显示视频
-
-
-
-
- 你的浏览器不支持 HTML 视频，这里有视频的替代链接 。
-
-
-
-```
-
-它包含：
-
-- 一个 `
` 元素
-- 一个 `` 元素，最初其包含 `class="hidden"` 属性
-- 一个嵌套在 `
` 元素中的 `
` 元素
-
-我们使用 CSS 来隐藏具有 `"hidden"` 类的元素。
-
-```css hidden
-div {
- width: 100%;
- height: 100%;
- background-color: #eee;
-}
-
-.hidden {
- display: none;
-}
-
-div video {
- padding: 40px;
- display: block;
- width: 400px;
- margin: 40px auto;
-}
-```
-
-JavaScript 代码看起来像这样：
-
-```js
-const btn = document.querySelector("button");
-const box = document.querySelector("div");
-const video = document.querySelector("video");
-
-btn.addEventListener("click", () => box.classList.remove("hidden"));
-video.addEventListener("click", () => video.play());
-box.addEventListener("click", () => box.classList.add("hidden"));
-```
-
-它添加了三个 `'click'` 事件处理器：
-
-- 一个在 `` 上，它显示了包含 `` 的 ``
-- 一个在 `
` 上，用于开始播放视频
-- 一个在 `` 上，用于隐藏视频
-
-让我们看看这个如何工作：
-
-{{ EmbedLiveSample('视频播放器示例', '100%', 500) }}
-
-你应该看到，当你点击按钮时，盒子和它所包含的视频都显示出来。但当你点击视频时，视频开始播放，但盒子又被隐藏起来了！
-
-视频在 `
` 内（是它的一部分），所以点击视频会*同时*运行两个事件处理器，导致这种行为。
-
-### 使用 stopPropagation() 修复问题
-
-正如我们在上一节所看到的，事件冒泡有时会产生问题，但有一种方法可以防止这些问题。[`Event`](/zh-CN/docs/Web/API/Event) 对象有一个可用的函数，叫做 [`stopPropagation()`](/zh-CN/docs/Web/API/Event/stopPropagation)，当在一个事件处理器中调用时，可以防止事件向任何其他元素传递。
-
-我们可以通过修改 JavaScript 代码来修复当前的问题：
-
-```js
-const btn = document.querySelector("button");
-const box = document.querySelector("div");
-const video = document.querySelector("video");
-
-btn.addEventListener("click", () => box.classList.remove("hidden"));
-
-video.addEventListener("click", (event) => {
- event.stopPropagation();
- video.play();
-});
-
-box.addEventListener("click", () => box.classList.add("hidden"));
-```
-
-我们在这里所做的是在 `
` 元素的 `'click'` 事件的处理器中对事件对象调用 `stopPropagation()`。这将阻止该事件向盒子内传递。现在试着点击按钮，然后再点击视频：
-
-{{EmbedLiveSample("使用 stopPropagation() 修复问题", '100%', 500)}}
-
-```html hidden
-显示视频
-
-
-
-
- 你的浏览器不支持 HTML 视频，这里有视频的替代链接 。
-
-
-
- 点我！
-
- ` 的，最后是 `
` 的：
-
-```
-你在 BODY 元素上进行了点击
-你在 DIV 元素上进行了点击
-你在 BUTTON 元素上进行了点击
-```
-
-为什么要同时使用捕获和冒泡功能？在过去的坏日子里，当浏览器的交叉兼容性远不如现在时，Netscape 只使用事件捕捉，而 Internet Explorer 只使用事件冒泡。当 W3C 决定尝试将行为标准化并达成共识时，他们最终确定了这个包括这两种行为的系统，这也是现代浏览器所实现的。
-
-默认情况下，几乎所有的事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。
-
-## 事件委托
-
-在上一节中，我们看了一个由事件冒泡引起的问题以及如何解决它。不过，事件冒泡并不只是令人讨厌：它可以非常有用。特别是，它可以实现**事件委托**。在这种做法中，当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时，我们在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。
-
-让我们回到第一个例子，当用户点击一个按钮时，我们设置整个页面的背景颜色。假设取而代之的是，页面被分为 16 个区域，我们想在用户点击每个区域时将其设置为随机颜色。
-
-这里是 HTML 代码：
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-