1.事件的冒泡(Bubble)
所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bigbox{
width: 200px;
height: 200px;
background-color: red;
}
#box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function(){
//为box绑定一个单击响应函数
var box = document.getElementById("box");
box.onclick = function(){
console.log("我是box的单击响应函数");
};
//为bigbox绑定一个单击响应函数
var bigbox = document.getElementById("bigbox");
bigbox.onclick = function(){
console.log("我是bigbox的单击响应函数");
};
//为body绑定一个单击响应函数
document.body.onclick = function(){
console.log("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="bigbox">
我是bigbox
<div id="box">我是box</div>
</div>
</body>
</html>
点击“我是box”,box及其祖先元素的单击事件都被触发了
2.取消冒泡
//为box绑定一个单击响应函数
var box = document.getElementById("box");
box.onclick = function(event){
//解决兼容问题
event = event || window.event;
console.log("我是box的单击响应函数");
//可以将事件对象的cancelBubble设置为true,即可取消冒泡
event.cancelBubble = true;
};
单击“我是box”,由于box取消了冒泡,所以只触发了box的单击事件
bigbox并没有取消冒泡,所以单击“我是bigbox”,bigbox还会向上冒泡,同时触发了其祖先元素的单击事件