上面是三个嵌套的div标签，如果给每一个div都定义一个点击事件，那么当点击里层的div时，其会将点击事件往外传，导致所有父层的点击事件都会被执行
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
body{
border: 1px solid black;
}
div{
padding: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: gray;
}
</style>
<script type="text/javascript">
window.onload = function(){
};
</script>
</head>
<body>
<div class="div1" οnclick="alert('div1');">
<div class="div2" οnclick="alert('div2');">
<div class="div3" οnclick="alert('div3')">
</div>
</div>
</div>
</body>
</html>下面实现点击按钮浮现div，点击其他部分收起，那么事件冒泡将会影响，执行如下代码，没有作用
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: gray;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
alert("click button");
oDiv.style.display = 'block';
}
document.onclick = function(){
alert("click document");
oDiv.style.display = 'none';
}
};
</script>
</head>
<body>
<input id="btn" type="button" value="点击">
<div id="div1"></div>
</body>
</html>下面去掉事件冒泡，就起到作用了
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: gray;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(ev){
var oEvent = ev || event;
// alert("click button");
oDiv.style.display = 'block';
oEvent.cancelBubble = true;//去掉冒泡事件
}
document.onclick = function(){
// alert("click document");
oDiv.style.display = 'none';
}
};
</script>
</head>
<body>
<input id="btn" type="button" value="点击">
<div id="div1"></div>
</body>
</html>
