冒泡现象:触发某元素的某个时间触发其父级元素的对应时间,从元素本身向上冒泡到Dom顶层
事件冒泡与阻止事件冒泡
<head lang="en">
<meta charset="UTF-8">
<title> 冒泡现象</title>
<style>
*{
margin: 0;
padding: 0;}
#div1{
display: none;
width: 100px;
height: 100px;background: yellowgreen }
</style>
</head>
<body>
<input type="button" value="btn" id="bt1"/>
<div id="div1">
</div>
<script>
/* 冒泡现象:点击文档上的按钮时,会触发事件点击文档document */
/* window.οnlοad=function(){
var bt=document.getElementById("bt1");
var div1=document.getElementById("div1");
bt.οnclick=function(){ //冒泡机制: 点击bt时,触发bt点击事件 - 向上冒泡,触发事件点击document
//所以这里并不会显示div,因为事件冒泡机制触发事件点击document会让这个div的display属性始终为none
div1.style.display='block';
}
document.οnclick=function(){
div1.style.display='none';
}
}*/
/* 阻止事件冒泡:实现效果点击按钮div显示,点击文档div消失 */
window.οnlοad=function(){
var bt=document.getElementById("bt1");
var div1=document.getElementById("div1");
bt.οnclick=function( ev){ //冒泡机制: 点击bt时,触发bt点击事件 - 向上冒泡,触发事件点击document
//所以这里并不会显示,因为事件冒泡机制触发事件点击document会让这个div的display属性始终为none
div1.style.display='block';
var ev= ev||window.event ;
ev.stopPropagation(); // 阻止事件冒泡: - 点击按钮时阻止冒泡触发上层事件(这里:点击文档事件)
}
document.οnclick=function(){
div1.style.display='none';
}
}
</script>