/    /  Javascript DOM- Bubbling

Javascript DOM- Bubbling

 

While developing webpages or websites using javascript, the concept of event bubbling is providing to use where the event handlers are invoked when one HTML element is nested on to the other HTML element and are part of the same event. This technique or method is called as Event Bubbling.

 

Example :

 

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width"> 
 <title>Event Bubbling</title> 
</head> 
<body> 
 <div id="p1"> 
  <button id="c1">I am child button</button> 
 </div> 

 <script> 
  var parent = document.querySelector('#p1'); 
   parent.addEventListener('click', function(){ 
    console.log("Parent is invoked"); 
   }); 

 var child = document.querySelector('#c1'); 
  child.addEventListener('click', function(){ 
   console.log("Child is invoked"); 
  }); 
 </script> 
</body> 
</html>

 

OUTPUT:

 

Javascript DOM- Bubbling

 

flow chart:

 

Javascript DOM- Bubbling

 

Stopping Bubbling:

 

In JavaScript, we use the event.stopPropagation () method.

 

Example:

 

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width"> 
 <title>Event Bubbling</title> 
</head> 
<body> 
 <div id="p1"> 
  <button id="c1" onclick="event.stopPropagation()">I am child</button> 
 </div> 
  <script> 
  var parent = document.querySelector('#p1'); 
   parent.addEventListener('click', function(){ 
    console.log("Parent is invoked"); 
   }); 
  var child = document.querySelector('#c1'); 
   child.addEventListener('click', function(){ 
    console.log("Child is invoked"); 
   }); 
 </script> 
</body> 
</html>

 

OUTPUT:

 

Javascript DOM- Bubbling