Event Bubbling Event capturing

There are two ways of event propagation in the HTML DOM, bubbling and capturing. The Event propagation is a way of defining the element order when an event occurs. For example lets say we have a <p> element inside a <div> element and both have event listeners. Now in this situation when the user clicks on <p> element, then in Event Bubbling the inner-most element's event is handled first(<p> element) and and in Event Capturing the outer-most element's event is handled first((<div> element)). With the addEventListener() method we can specify the propagation type by using the "useCapture" parameter:
  element.addEventListener(event, function, useCapture);
where the boolean value true is used for the Event Capturing.
  element.addEventListener(event, function, true);
and the boolean value false is used for the Event Bubbling.
  element.addEventListener(event, function, false);
Example :
<html>
<head>
  <style>
    div {
      border: 2px solid blue;
      background-color: orange;
      padding: 15px;
    }
    p {
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="div1">
  <p id="para1">Hello world, This is a Test Paragraph.</p>
  </div>
  <br/>
  <div id="div2">
  <p id="para2">Hello world, This is a Test Paragraph.</p>
  </div>
  <script>
    document.getElementById('div1').addEventListener("click", function() {alert("You Clicked on <DIV> element.");}, false);
    document.getElementById('para1').addEventListener("click", function() {alert("You Clicked on <P> element.");}, false);
    document.getElementById('div2').addEventListener("click", function() {alert("You Clicked on <DIV> element.");}, true);
    document.getElementById('para2').addEventListener("click", function() {alert("You Clicked on <P> element.");}, true);
  </script>
</body>
</html>
Output :


Hello world, This is a Test Paragraph.

Hello world, This is a Test Paragraph.