<!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>
<h1>JavaScript addEventListener()</h1>
<div id="myDiv1">
<h2>Bubbling:</h2>
<p id="myP1">锟斤拷锟斤拷锟揭ｏ拷</p>
</div><br>
<div id="myDiv2">
<h2>Capturing:</h2>
<p id="myP2">锟斤拷锟斤拷锟揭ｏ拷</p>
</div>
<script>
document.getElementById("myP1").addEventListener("click", function() { alert("锟斤拷锟斤拷锟剿帮拷色元锟截ｏ拷");}, false);
document.getElementById("myDiv1").addEventListener("click", function() { alert("锟斤拷锟斤拷锟剿筹拷色元锟截ｏ拷");}, false);
document.getElementById("myP2").addEventListener("click", function() { alert("锟斤拷锟斤拷锟剿帮拷色元锟截ｏ拷");}, true);
document.getElementById("myDiv2").addEventListener("click", function() { alert("锟斤拷锟斤拷锟剿帮拷色元锟截ｏ拷");}, true);
</script>
</body>
</html>