Understand JS binding events and js binding events

Understand JS binding events and js binding events

This article provides a detailed analysis of JS binding events for your reference. The specific content is as follows:

The binding event has compatibility issues. In earlier versions of IE, obj. attachEvent () was used, while other browsers used addEventListener ().
Both methods have three parameters:Event Type, event Function, The last one isBoolean Value, True or false.
True indicates execution in the event capture phase, and false indicates execution in the event bubble phase.
Because IE only supports event bubbling, in most cases, the event handler is added to the event stream bubble stage, that is, the default value is "false"
This allows for compatibility with various browsers to the maximum extent. It is best to add the event handler to the capture phase only when the event is intercepted before it reaches the target. If not, we do not recommend that you register an event handler during the event capture phase.
Event binding compatible with various browsers:

 function addEvent(obj, eventType, callback, bubble){ if(obj.addEventListener){  obj.addEventListener(eventType, callback, bubble); }else{  obj.attachEvent(eventType, callback, bubble); } }

When calling the callback function, note that no parentheses are required for the callback function, which is similar to setTimeout.

This part is easy to understand. For the last parameter, I believe many people do not understand it very well. In short, I still need to write a program to test it.

HTML content:

<! Doctype html> 
Js content: (Case 1)
<Script> var out = document. getElementById ('out'); var middle = document. getElementById ('middle'); var inner = document. getElementById ('inner '); // when you click inner, the trigger sequence is: inner ------- middle ------ out. addEventListener ('click', function () {alert ("I am the outermost") ;}, false); middle. addEventListener ('click', function () {alert ("I am in the middle") ;}, false); inner. addEventListener ('click', function () {alert ("I am the innermost") ;}, false); </script>
Js content: (Case 2)
<Script> var out = document. getElementById ('out'); var middle = document. getElementById ('middle'); var inner = document. getElementById ('inner '); // when you click inner, the trigger sequence is: out ------ inner ------- middle out. addEventListener ('click', function () {alert ("I am the outermost") ;}, true); middle. addEventListener ('click', function () {alert ("I am in the middle") ;}, true); inner. addEventListener ('click', function () {alert ("I am the innermost") ;}, true); </script>
Js content: (Case 3)

<Script> var out = document. getElementById ('out'); var middle = document. getElementById ('middle'); var inner = document. getElementById ('inner '); // when you click inner, the trigger sequence is: out ------ inner ------- middle out. addEventListener ('click', function () {alert ("I am the outermost") ;}, true); middle. addEventListener ('click', function () {alert ("I am in the middle") ;}, false); inner. addEventListener ('click', function () {alert ("I am the innermost") ;}, false); </script>
Js content: (case 4)

<Script> var out = document. getElementById ('out'); var middle = document. getElementById ('middle'); var inner = document. getElementById ('inner '); // when you click inner, the trigger sequence is: out ------- middle ------ inner out. addEventListener ('click', function () {alert ("I am the outermost") ;}, true); middle. addEventListener ('click', function () {alert ("I am in the middle") ;}, true); inner. addEventListener ('click', function () {alert ("I am the innermost") ;}, false); </script>
Js content: (Case 5)
<Script> var out = document. getElementById ('out'); var middle = document. getElementById ('middle'); var inner = document. getElementById ('inner '); // when you click inner, the trigger sequence is: middle ------- inner ------ out. addEventListener ('click', function () {alert ("I am the outermost") ;}, false); middle. addEventListener ('click', function () {alert ("I am in the middle") ;}, true); inner. addEventListener ('click', function () {alert ("I am the innermost") ;}, false); </script>
Js content: (Case 6)
<Script> var out = document. getElementById ('out'); var middle = document. getElementById ('middle'); var inner = document. getElementById ('inner '); // when you click inner, the trigger sequence is: out ------- inner ------ middle out. addEventListener ('click', function () {alert ("I am the outermost") ;}, true); middle. addEventListener ('click', function () {alert ("I am in the middle") ;}, false); inner. addEventListener ('click', function () {alert ("I am the innermost") ;}, true); </script>
After reading the results of the above six cases, I believe you can fully understand the difference between the last parameter true and false.
Articles you may be interested in:

 

 
  
Sample Code of the Javascript loop binding event
 
  
Batch binding of js and jquery event transfer parameter 1 (New Pig Original)
 
  
Simple implementation code of Javascript dynamic binding event
 
  
Code for dynamically adding events (binding events) in JS
 
  
Js remove event js bind event instance application
 
  
Use closures to solve problems related to event binding to elements in JS in batches
 
  
Js binding event this points to the problem solution that has changed
 
  
JavaScript binds events in the for loop to solve different event parameters.