js事件（事件冒泡與事件捕獲）

事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。

點選

上面兩個點選事件如果點選的時候，到底誰會被先觸發呢，為了解決這個問題微軟和網景提出了兩種幾乎完全相反的概念。

微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到document物件。

因此在事件冒泡的概念下在p元素上發生click事件的順序應該是p -> div -> body -> html -> document

網景提出另一種事件流名為事件捕獲(event capturing)。與事件冒泡相反，事件會從最外層開始發生，直到最具體的元素。

因此在事件捕獲的概念下在p元素上發生click事件的順序應該是document -> html -> body -> div -> p

後來 w3c 採用折中的方式，平息了戰火，制定了統一的標準——先捕獲再冒泡。

當事件冒泡和捕獲在一起出現的時候

事件冒泡和捕獲，衍生出事件委託，因為當你點選子元素的時候，實際上走的是父元件的事件

點選子元素的時候，由父元素去代為執行，能減少事件輸出，**的編寫量

取消預設事件

w3c 的方法是 e.preventdefault()，ie 則是使用 e.returnvalue = false;

取消預設事件，還可以用return來進行阻止

阻止冒泡的事件

w3c 的方法是 e.stoppropagation()，ie 則是使用 e.cancelbubble = true

ie9 之前的ie不支援 stoppropagation() 方法。相反，ie事件物件有乙個 canclebubble 屬性，設定這個屬性為 true 能阻止事件進一步傳播。（ ie8 及之前版本不支援事件傳播的捕獲階段，所以冒泡是唯一待取消的事件傳播。）

冒泡事件案例：

正常情況下，li>ul>div，這就是正常的冒泡的事件

阻止冒泡的事件：

window.event? window.event.cancelbubble = true : e.stoppropagation();

阻止冒泡事件，案例

當時寫部落格的時候忘了寫阻止冒泡的事件了，多謝老鐵提醒！！！