绑定事件的语法:
elem.addEventListener("事件名",回调函数,true/false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的冒泡和阻止</title>
<style type="text/css">
#div1{width: 400px;height: 400px;background-color: red;}
#div2{width: 200px;height: 200px;background-color:green;}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function init(){
div1 = $("div1");
div2 = $("div2");
//这是在事件捕获中执行,当点击div2,会先执行div1的点击事件,然后才执行div2的事件
div1.addEventListener("click", div1_click,true);
div2.addEventListener("click", div2_click,true);
//这是在事件冒泡中执行,当点击div2,会先执行div2的点击事件,然后才执行div1的事件
div1.addEventListener("click", div1_click,false);
div2.addEventListener("click", div2_click,false);
}
function div1_click(e){
alert("I am a div1");
}
function div2_click(e){
alert("I am a div2");
//既然在冒泡这里执行。我们就可以在这阻止冒泡,让程序执行完div2以后就不往上冒了
e.stopPropagation();
}
window.addEventListener("load", init,false);
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>