Skip to main content

HTML DOM bubbling and capturing With the addEventListener() in JAVA SCRIPT

Event Bubbling or Event Capturing..
There are two ways of event propagation in the HTML DOM, bubbling and capturing.
Event propagation is a way of defining the element order when an event occurs. If you have a
element inside a <div>
element, and the user clicks on the
element, which element's "click" event should be handled first?
In bubbling the inner most element's event is handled first and then the outer: the
element's click event is handled first, then the <div> element's click event.
In capturing the outer most element's event is handled first and then the inner: the <div> element's click event will be handled first, then the element's click event.
With the addEventListener() method you can specify the propagation type by using the "useCapture" parameter:
Syntax: addEventListener(event, function, useCapture);
CODING:
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 5px solid lightgreen;
    text-align :center;
    padding: 2px;
}
</style>
</head>
<body>
<div id="myDiv">
  <h3 id="h3">Click this heading, I am Bubbling.</h3>
  <p id="myP">Click this paragraph, I am Bubbling.</p>
</div><br>

<div id="myDiv2">
  <h3 id="h32">Click this heading, I am Capturing</h3>
  <p id="myP2">Click this paragraph, I am Capturing.</p>
</div>

<script>
document.getElementById("myP").addEventListener("click", function() {
    alert(event.srcElement);}, false);
document.getElementById("h3").addEventListener("click", function() {
    alert(event.srcElement);}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert("1st Div tag");}, false);

document.getElementById("myP2").addEventListener("click", function() {
    alert(event.srcElement);}, true);
document.getElementById("h32").addEventListener("click", function() {
    alert(event.srcElement);}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("2nd Div tag");}, true);
</script>
</body>
</html>

Comments

Post a Comment