About event bubbling and event capturing mechanism in javascript-JS Tutorial-php.cn

About event bubbling and event capturing mechanism in javascript

巴扎黑

Release： 2017-09-02 13:30:33

Original

1809 people have browsed it

This article mainly introduces relevant information on the detailed explanation of event bubbling and event capture mechanisms in JavaScript. There is a lot of relevant information on the Internet, but it is not very clear. Through this article, I hope that everyone can understand and master it. Friends who need it You can refer to the following

detailed explanation of event bubbling and event capture mechanisms in javascript

The role of both:Describe event triggering timing issues

Event capture: From the document to the node that triggers the event, that is, from top to bottom to trigger the event---from outside to inside

Event Bubbling: Trigger events from bottom up---from inside to outside

The third parameter of the binding event method is to control whether the event triggering sequence is event capture

true, event capture; false, event bubbling

The general default is false, that is, event bubbling

Jquery’s e.stopPropagation will prevent bubbling , which means that ancestor-level events should not be triggered until the DOM

The following is an example I tried:

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>事件冒泡与事件捕获</title> 
  <script> 
    window.onload = function () { 
      document.getElementById("parent").addEventListener("click",function(e){ 
        alert("parent事件被触发，"+this.id); 
      },true) 
      document.getElementById("child").addEventListener("click",function(e){ 
        alert("child事件被触发，"+this.id) 
      },true) 
    } 
 
  </script> 
</head> 
<body> 
<p id="parent"> 
  parent事件 
  　　<p id="child" class="child"> 
  child事件 
  </p> 
</p> 
</body> 
</html>

Copy after login

In the example, I added a third true, which is event capture.

If not added, the default event bubbling is used. At this time, the event triggering sequence is from the inside out

The above is the detailed content of About event bubbling and event capturing mechanism in javascript. For more information, please follow other related articles on the PHP Chinese website!