Introduction to Event bubbling and event capture in JS _javascript tips

Talk about JavaScript events, event bubbling, event capture, and blocking default events These three topics, whether in the interview or in peacetime work, are difficult to avoid.
Event Capture phase: an event is searched down from the top level of the tag until the event target (target) is captured.
event Bubbling phase: The event starts at the event target and bubbles up until the top level of the page tag.

1. Bubbling event:

Events are triggered in the order from the most specific event target to the least specific event target (Document object). In layman's terms, is when a number of nested div is set up, that is, the establishment of a parent-child relationship, when the parent Div and the child Div joined the onclick event, when the child div triggered the onclick event, the child div for the corresponding JS operation, But the OnClick event of the parent Div is also triggered.

Html:

<div>
 <input type= "button" value= "test event bubbling"/>
</div>

Js:

  var $input = document.getelementsbytagname ("input") [0];
   var $div = document.getelementsbytagname ("div") [0];
   var $body = document.getElementsByTagName ("body") [0];
 
   $input. onclick = function (e) {
      This.style.border = "5px solid red"
      var e = e | | window.e;
      Alert ("Red")
   }
   $div. onclick = function (e) {
      This.style.border = "5px solid green"
      alert ("green")
   }
   $body. onclick = function (e) {
      This.style.border = "5px solid yellow"
      alert ("Yellow")
   }

Effect: In turn, pop "red", "green", "yellow". This is event bubbling: the element that triggers the button, but is triggered along with the event that the parent element binds.

2. Prevent event bubbling

If the event binding to input is changed to:

$input. onclick = function (e) {
  This.style.border = "5px solid red"
  var e = e | | window.e;
  Alert ("Red")
  e.stoppropagation ();
}

This time only "red" pops up because the event bubbles are blocked.

3. Event Capture:

From the top-level element to the target element or from the top element of the target element, and event bubbling is a reverse process. Events are triggered from the most imprecise object (Document object), and then to the most precise (or at the window level, but must be specifically specified by the developer).

$input. AddEventListener ("click", Function () {
  This.style.border = "5px solid red";
  Alert ("Red")
}, True
$div. AddEventListener ("click", Function () {
  This.style.border = "5px solid green";
  Alert ("Green")
}, True
$body. AddEventListener ("click", Function () {
  This.style.border = 5px Solid Yellow ";
  Alert ("Yellow")
}, True)

This time, in turn, pop-up "yellow", "green", "red". This is the capture of the event.

If you change the third parameter of the AddEventListener method to False, it is only triggered in the bubbling phase, and the pop-up is: "Red", "green", "yellow". This is because in the model of the Consortium, when any event occurs, event capture begins at the top level until the event trigger reaches the event source element. Then, the event bubbles up from the source of the event until the document is reached.

The programmer can choose whether to bind events by event capture or event bubbling by themselves, by means of the AddEventListener function when the event is bound, with three arguments, and if the third argument is true, event trapping is used, or false, which means event bubbling.

Ele.addeventlistener (' click ', dosomething2,true)
True= capture
False= bubbling

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.