“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The bubbling

Let’s start with a simple example:

In the following code, we add an onclick event to the div, but if we click on the p tag inside the div, we will see that this event is also executed. Why?

It’s called bubbling, and the principle of bubbling is simple:

When an event occurs on an element, it first runs handlers on that element, then handlers on its parent element, and then all the way up to handlers on other ancestors.

You can imagine if you drop a rock into water, bubbles will keep coming up from the bottom. That is, events will start at the innermost element and propagate up to the Document object.

💥 Note: only the event is passed, not the bound event function. So if the parent didn’t bind the event function, nothing would happen if the event was passed, but it was passed.

Let’s say we have another nested FORM > DIV > P with three layers, each with a handler:

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
Copy the code

Clicking inside

will run onclick first:

  1. In the<p>On the.
  2. And then the exterior<div>On the.
  3. And then the exterior<form>On the.
  4. And so on, all the way to the enddocumentObject.

If at this point you

  • Click on thepTag, will pop up 3 alert, the order isp → div → form
  • Click on thedivTag, will pop up 2 alert, the order isdiv → form
  • Click on theformTag, only 1 will pop upform

event.target

As mentioned earlier, when an event occurs, the browser creates an Event object, puts the details into it, and passes it as a parameter to the handler. One of the

Event.target gets the exact source of the event (that is, the element that actually triggered the event)

Event.currenttarget refers to the element that is bound to the event listener (the parent element that triggered the event element)

As in the example at the beginning:

If the P tag is clicked, event.target gets the P tag, and event.currentTarget gets the div tag bound to the event.

💥 Note: If you print event directly, the currentTarget object will be null, but if you print event. CurrentTarget, you will get the actual value. CurrentTarget no longer exists when you expand the console to view it. If you want to get it, you need to assign a value to it and then do the operation. 👉 Stack Overflow Related questions answered 👉 Github related questions answered

Stop the bubbling

There are two ways to cancel event bubbling:

  • Standard W3C way: e.topPropagation (); StopPropagation is a method of the standard event object

  • Nonstandard IE mode :ev.cancelBubble=true; CancelBubble is a property of the IE event object, set to true

Function encapsulation that prevents bubbling

Function stopBubble(e) {// If an event object is provided, If (e &&e.TopPropagation){// Therefore it supports W3C stopPropagation() method e.topPropagation (); } else {/ / otherwise, we need to use IE to canceling event bubbling window. The event. The cancelBubble = true; }}Copy the code

If an element has multiple handlers on an event, even if one of them stops bubbling, the other handlers will still execute. In other words, event.stopPropagation() stops moving up, but all other handlers on the current element continue to run.

One event. StopImmediatePropagation () method, can be used to stop the bubble, and to prevent a handler on the current element. After using this method, no other handlers are executed.

References:

Bubbling and capturing

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 Take a look at JS prototype inheritance

Do you know how to use getters and setters in 👉 JS?

👉 In-depth understanding of ES6 arrow objects

👉 JS decorator pattern instance analysis