Home >Web Front-end >JS Tutorial >About event bubbling and event capturing mechanism in javascript

About event bubbling and event capturing mechanism in javascript

巴扎黑Original: 2017-09-02 13:30:331786browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to ionic2 lazy loading configurationNext article：Introduction to ionic2 lazy loading configuration

See more

About event bubbling and event capturing mechanism in javascript

Related articles