javascript中事件_说明了JavaScript中事件传播的三个阶段

javascript中事件

The three phases of event propagation in JavaScript are essential to understanding how to use events, and in addition, it’s another extremely common question asked during JavaScript tech interviews.

JavaScript中事件传播的三个阶段对于理解如何使用事件至关重要，此外，这是JavaScript技术采访中提出的另一个极为常见的问题 。

These three phases in order are 1) the event capturing phase, 2) the target phase, and 3) the event bubbling phase.

这三个阶段依次为1)事件捕获阶段，2)目标阶段和3)事件冒泡阶段。

In essence, the event first goes down through the parent elements until it reaches the target element (capturing phase). When the event reaches the target it triggers there (target phase), and then goes back up the chain (bubbling phase), calling handlers along the way. (via javascript.info)

本质上，事件首先向下遍历父元素，直到到达目标元素(捕获阶段)为止。 当事件到达目标时，它将在那儿触发(目标阶段)，然后返回链上(冒泡阶段)，并一路调用处理程序。 (通过 javascript.info )

The target element refers to the exact spot that is triggering the event. For example if you clicked on a button within a <div>, the corresponding <button> tag would be the target. This element can be accessed as event.target and won’t change throughout the phases of event propagation.

目标元素是指触发事件的确切位置。 例如，如果您单击<div>中的<button> ，则相应的<button>标记将成为目标。 该元素可以作为event.target进行访问，并且在事件传播的整个阶段都不会更改。

什么是事件捕获？ (What is event capturing?)

Going down - just like event capturing!

下去-就像事件捕获一样！

Event capturing is the first phase that occurs when the event moves all the way down the elements from the top (window) to the event target, like a waterfall. This is rarely used when handling events, and most of the time this happens behind the scenes. If a handler is placed, it’s usually done during the event bubbling phase, because the closer an element is to the target, the more context the element will have.

事件捕获是事件在事件从顶部( window )一直向下移动到事件目标(如瀑布)时一直发生的第一阶段。 处理事件时很少使用它，大多数情况下，这是在幕后发生的。 如果放置了处理程序，通常是在事件冒泡阶段完成的，因为元素离目标越近，元素将具有的上下文越多。

When event handlers are set with onClick(or a different on<event>) or addEventListener(event, handler), only the target phase and event bubbling phase will catch it. If we want to catch an event during the capture phase, we need to explicitly add {capture: true} or just the implied true to the end of the event listener.

使用onClick (或其他on<event> )或addEventListener(event, handler) ，只有目标阶段和事件冒泡阶段会捕获它。 如果要在捕获阶段捕获事件，则需要在事件侦听器的末尾显式添加{capture: true}或仅隐含true 。

element.addEventListener(
// or this way also works
element.addEventListener(

目标阶段是什么？ (What is the target phase?)

Although there are officially three phases, the second “target” phase that occurs when the event.target element is reached, is not handled separately like the others. Both the event capture and event bubbling handlers will trigger this phase automatically as they finish and begin with the target element.

尽管正式地分为三个阶段，但是到达event.target元素时发生的第二个“目标”阶段不会像其他阶段那样单独进行处理。 事件捕获和事件冒泡处理程序都将在完成并从目标元素开始时自动触发此阶段。

什么是事件冒泡？ (What is event bubbling?)

Bubbles going up — just like event bubbling

气泡上升-就像事件冒泡一样

Event bubbling involves running the target element’s handlers, and then “bubbling” upwards to the next parent element’s handlers, then the grandparent element above that, and so on. You can think of this as similar to the notion of bubbles rising up in the water. This means that if we have a <p> nested inside of a <div>, nested inside of a <form>, the handlers will run them in order: <p> -> <div> -> <form>. This bubbling up will run until it gets to the top of the elements, through the html, the document object and up to the window. Almost all events will bubble up, with few exceptions such as focus.

事件冒泡涉及到运行目标元素的处理程序，然后向上“冒泡”至下一个父元素的处理程序，然后是其上方的祖父母元素，依此类推。 您可以认为这类似于气泡在水中上升的概念。 这意味着，如果我们有一个<p>嵌套在<div> ，嵌套在<form> ，则处理程序将按以下顺序运行它们： <p> -> <div> -> <form> 。 这种冒泡将一直持续到它到达元素的顶部，通过html ， document object并到达window为止。 几乎所有事件都会冒出来，只有很少的例外，例如focus 。

<form onClick="alert('You clicked the form!')">
  <div onClick="alert('You clicked the div!')">
    <p>If you click me, the other handlers will still run!</p>
  </div>
</form>

If for some reason we needed to stop this propagation upwards after the event target’s handlers finish running, we could use event.stopPropagation(). If we wanted to stop both the propagation and the current target’s handlers from running, we could also use event.stopImmediatePropagation(). These aren’t really recommended since these situations could be handled in other ways, and they could cause unforeseen side effects, but still good to know they exist.

如果由于某种原因我们需要在事件目标的处理程序完成运行之后停止向上传播，则可以使用event.stopPropagation() 。 如果我们想停止传播和当前目标的处理程序的运行，我们也可以使用event.stopImmediatePropagation() 。 实际上，不建议使用这些方法，因为可以用其他方法处理这些情况，它们可能导致无法预料的副作用，但仍然知道它们的存在。

Here is a code example that helps to illustrate the event propagation phases in action:

这是一个代码示例，可以帮助说明实际的事件传播阶段：

javascript.info javascript.info提供

普通英语JavaScript (JavaScript In Plain English)

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！

翻译自: https://medium.com/javascript-in-plain-english/the-3-phases-of-event-propagation-explained-f76348b5343f

javascript中事件