事件冒泡
當事件發生后，這個事件就要開始傳播(從里到外或者從外向里)。為什么要傳播呢？因為事件源本身（可能）並沒有處理事件的能力，即處理事件的函數（方法）並未綁定在該事件源上。例如我們點擊一個按鈕時，就會產生一個click事件，但這個按鈕本身可能不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數的名字，就是讓這個函數去處理該按鈕的click事件），或者按鈕的父級綁定有事件函數，當該點擊事件發生在按鈕上，按鈕本身並無處理事件函數，則傳播到父級去處理。
什么是事件冒泡
<!DOCTYPE html> <html lang="en" onclick="alert('html')"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <title>Document</title> </head> <body onclick="alert('body')"> <!--html--> <div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)"> <div id="div2" style="width:300px; height:300px; background:palevioletred"> <div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)"> <div id="div1" style="width:100px; height:100px; background:palegreen"> <a id="aaa" href="http://www.baidu.com">aaa</a> </div> </div> </div> </div> <script> //此jquery既阻止默認行為又停止冒泡 // $("#div1").on('click',function(){ // return false; // }); window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv1.onclick = function (ev){ var oEvent = ev || event; alert("this is div1"); //js阻止事件冒泡 //oEvent.cancelBubble = true; //oEvent.stopPropagation(); //js阻止鏈接默認行為，沒有停止冒泡 //oEvent.preventDefault(); //return false; } oDiv2.onclick = function (ev){ var oEvent = ev || event; alert("this is div2"); oEvent.cancelBubble = true; } } </script> </body> </html>
