Javascript DOM HTML Element addEventListener() Method for event bubbling and capturing

Introduction

Using the optional useCapture parameter to demonstrate the difference between bubbling and capturing: 

document.getElementById("myDiv").addEventListener("click", myFunction, true);

This example demonstrates the difference between bubbling and capturing when adding event listeners.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from   ww  w  .java  2 s.  c o m*/
  background-color: coral;
  border: 1px solid;
  padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv">
  <p id="myP">Click this paragraph, I am Bubbling.</p>
</div><br>

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

<p id="demo"></p>


<script>
document.getElementById("myP").addEventListener("click", function() {
    document.getElementById("demo").innerHTML = "You clicked the P element!";
}, false);

document.getElementById("myDiv").addEventListener("click", function() {
    document.getElementById("demo").innerHTML = "You clicked the DIV element!";
}, false);

document.getElementById("myP2").addEventListener("click", function() {
    document.getElementById("demo").innerHTML = "You clicked the P element!";
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
    document.getElementById("demo").innerHTML = "You clicked the DIV element!";
}, true);
</script>

</body>
</html>



PreviousNext

Related