IE的事件流叫做事件冒泡(event bubbling)，即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然後逐級向上傳播到較爲不具體的節點(文檔)。
先看一個關於事件冒泡的例子：
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<script type="text/javascript">
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var oDiv3=document.getElementById("div3");
function fn(){
alert(this.id);
}
oDiv1.onclick=fn; //div1
oDiv2.onclick=fn; //div2,div1
oDiv3.onclick=fn; //div3,div2,div1
</script>
</body>上例中，當點擊oDiv3時，點擊事件會向上傳播到oDiv2、oDiv1，因此會依次彈出div3、div2、div1。
冒泡的影響的實例：
要實現效果：點擊“顯示”按鈕時，下方的盒子顯示，然後再點擊文檔其他區域時，盒子消失。
<body>
<input id="input1" type="button" value="顯示" />
<div id="div1" style="width: 100px; height: 100px; background: orange; display: none;"></div>
<script type="text/javascript">
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("div1");
oInput.onclick=function(){
oDiv.style.display='block';
}
document.onclick=function(){
oDiv.style.display='none';
}
</script>
</body>點擊“顯示”按鈕，發現盒子並沒有顯示，這是因爲，點擊oInput，事件會冒泡到document上，即在 oDiv.style.display=’block’ 的瞬間 oDiv.style.display=’none’。
阻止冒泡：
<body>
<input id="input1" type="button" value="顯示" />
<div id="div1" style="width: 100px; height: 100px; background: orange; display: none;"></div>
<script type="text/javascript">
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("div1");
oInput.onclick=function(ev){
var ev= ev || window.event;
ev.cancelBubble=true; //阻止冒泡
oDiv.style.display='block';
}
document.onclick=function(){
oDiv.style.display='none';
}
</script>
</body>實例應用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 200px;
background: red;
position: absolute;
left: -100px;
top: 100px;
}
#div2{
width: 30px;
height: 60px;
background: black;
color: white;
text-align: center;
position: absolute;
right: -30px;
top: 70px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
<script type="text/javascript">
var oDiv1=document.getElementById("div1");
oDiv1.onmouseover=function(){
oDiv1.style.left='0px';
}
oDiv1.onmouseout=function(){
oDiv1.style.left='-100px';
}
</script>
</body>
</html>