x
<html><head><style>div { background-color: coral; border: 1px solid; padding: 50px;}</style></head><body><p>This example demonstrates the difference between bubbling and capturing when adding event listeners.</p><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><script>document.getElementById("myP").addEventListener("click", function() { alert("You clicked the P element!");}, false);document.getElementById("myDiv").addEventListener("click", function() { alert("You clicked the DIV element!");}, false);document.getElementById("myP2").addEventListener("click", function() { alert("You clicked the P element!");}, true);document.getElementById("myDiv2").addEventListener("click", function() { alert("You clicked the DIV element!");}, true);</script></body><!-- Mirrored from www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener_capture by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2020 03:02:17 GMT --></html>