What is Event Capturing in JavaScript?

JavascriptObject Oriented ProgrammingProgramming

Event Capturing

Event capturing is the event starts from top element to the target element. It is the opposite of Event bubbling, which starts from target element to the top element.

Code Elaboration

In the following code, in body section three div elements are taken and a style got applied so as to make them nested.

  • Add a event handler to each of the div tags using addEventListener().
  • Make sure that here the event is "click" event.
  • The addEventListener() method accepts 3 parameters.

             a) The event it is going to access, here it is click event.  

             b) An event handler function so as to display alert messages.

             c) The third parameter is called phase. In this parameter if we keep true then the event capturing will be                           enabled.If we keep false then event bubbling will be enabled.  

  • The event handler function, which is used to display alert boxes, will use getAttribute() to get the id value of the div element which got clicked.
  • When we click on the inner most nested tag div3, since event capturing got enabled here, the alert messages starts from top div1 tag to the target tag div3.
  • When we click on the div2 tag, then alert boxes will display from top div1 tag to target tag div2.

Example

Live Demo

<html>
<head>
<style>
   .divstyle{
      display:table-cell;
      border: 2px solid black;
      padding: 20px;
      text-align: center;
   }
</style>
</head>
<body>
   <div id = "div1" class="divstyle">
   div1
   <div id = "div2" class="divstyle">
   div2
   <div id = "div3" class="divstyle">
   div3
<script>
   var divs = document.getElementsByTagName("div");
   for(var i = 0; i<divs.length; i++){
      divs[i].addEventListener("click",clickhandler,true );
   }
   function clickhandler() {
      alert(this.getAttribute("id") + "event got handled");
   }
</script>
</body>
</html>

On executing the above program we get the following image on the screen

On clicking the above div3(target element) we get the following as output

output


On clicking ok of the above div1 alert box we get the following div2 alert box opened


On clicking ok of the above div2 alert box we get the following div3 alert box opened.


raja
Published on 11-Jun-2019 14:02:30
Advertisements