Detailed explanation of Javascript event capture and bubbling methods

1. Event Processing Model

Event bubbling and event capturing : Event bubbling and event capturing were proposed by Microsoft and Netscape respectively. Both concepts are intended to solve the problem of event flow (the order in which events occur) in the page.

<div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
</div>

Given three nested divs, when the same event is registered for the three elements, what is their triggering order?

1. Event bubbling

Microsoft proposed an event stream called event bubbling. Elements that are structurally (not visually) nested will have a bubbling function, that is, the same event will bubble from the child element to the parent element. (Bottom-up)

For the above example, if the bubbling method is used, the triggering order should be: d3——>d2——>d1, so let's verify it:

(1) Bind events to three div elements

//1. Get the element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Binding event d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

(2) Operation results:

Click on the red area:

Click on the purple area:

Click on the green area:

The above is the event bubbling!

2. Event Capture

Elements that are structurally (not visually) nested will have the function of event capture, that is, the same event is captured from the parent element to the child element (event source element). (Top-down) (ie no events are captured)

For the above example, if the bubbling method is used, the triggering order should be: d1——>d2——>d3, so let's verify it:

(1) Bind events to three div elements

//1. Get the element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Binding event d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

(2) Operation results:

Click on the red area:

Click on the purple area:

Click on the green area:

Event capture get!!!

Notice:

• Trigger order: capture first, then bubbling
• Events such focus , blur , change , submit , reset , select etc. do not bubble

2. Prevent event bubbling

(1) W3C standard event.stopPropagation(); but IE9 and below do not support it

//1. Get the element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Binding event d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.stopPropagation();
      console.log(this.id)
   }

You will find that when you click the green area, no external events are triggered in sequence, and event bubbling is blocked:

(2) Unique to IE: event.cancelBubble = true;

//1. Get the element var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. Binding event d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.cancelBubble = true;
      console.log(this.id)
   }

The result is the same as (1).

(3) Merge cancellation: return false

In javascript, return false only prevents the default behavior, but with jQuery it prevents both the default behavior and object bubbling.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!