مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
    background-color: coral;
    padding: 50px;
}
#myP1, #myP2 {
    background-color: white; 
    font-size: 20px;
    border: 1px solid;
    padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
    alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
    alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
    alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
    alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

Event Bubbling or Event Capturing