一、事件冒泡：一個元素接收到事件之後，會把自身接收的全部事件所有傳播給它的父級，直到最頂層window。css
<body>
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>
</body>
上述div 的嵌套關係是存在事件冒泡的。不管css如何對上面三個div進行位置的定位。函數
冒泡機制是默認存在的；this
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1(){
alert(this.id);
}
oDiv1.onclick = fn1;//給oDiv1添加了事件處理函數
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
當點擊div3時，不但會彈出div3 還會有div2 div1.
當oDiv2.onclick = fn1被註釋時，點擊div3，不但會彈出div3 還會有div1 彈出。（這也就是說明，oDiv2.onclick = fn1被註釋以後，div2仍是可以接收到div3傳過來的點擊事件，沒有彈出div2的緣由是沒有告訴div2在接收到點擊事件後如何進行處理。例如上面的註釋不能說是給div2 添加事件，應該是給div2 添加了事件處理函數。）code
二、冒泡機制的存在即給咱們帶了便利也給咱們帶來了一些沒必要要的麻煩。冒泡機制是默認存在的（多是存在帶來的好處優於帶來麻煩）。事件
三、阻止事件冒泡：get
在當前要阻止冒泡的時間函數中調用：ev.cancelBubble = true;
四、由於事件冒泡要傳到父級，若是想對某些結構進行處理的時候，尤爲是嵌套結構，能夠想想事件的冒泡機制。io