Javascript DOM- Capturing

Home / JavaScript – Tutorial / Javascript DOM- Capturing

Javascript DOM- Capturing

Netscape Browser was the first to develop the concept of Event Capturing. Event Capturing is opposite to event bubbling, wherein event capturing, an event moves from the outermost element to the target. Otherwise, in the case of javascript event bubbling, the event movement starts from the target to the outermost element in the file. Event Capturing is performed before event bubbling but capturing is allows very rarely because event bubbling is sufficient to handle the event flow.

Example:

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

 <script> 
  var parent = document.querySelector('#p1'); 
  var child = document.querySelector('#c1'); 

  parent.addEventListener('click', function(){ 
   console.log("Parent is invoked"); 
  },true); 
  child.addEventListener('click', function(){ 
   console.log("Child is invoked"); 
  }); 
 </script> 
</body> 
</html>

OUTPUT:

Javascript DOM- Capturing