當事件發生後，這個事件就要開始傳播(從裡到外或者從外向里)。為什麼要傳播呢？因為事件源本身（可能）並沒有處理事件的能力，即處理事件的函式（方法）並未綁定在該事件源上。例如我們點擊一個按鈕時，就會產生一個click事件，但這個按鈕本身可能不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函式的名字，就是讓這個函式去處理該按鈕的click事件），或者按鈕的父級綁定有事件函式，當該點擊事件發生在按鈕上，按鈕本身並無處理事件函式，則傳播到父級去處理。
基本介紹
- 中文名：事件冒泡
- 外文名：Event Bubbling
- 套用：軟體編程
- 所屬學科：邏輯學
事件介紹,引發問題,阻止事件,擴展封裝,阻止默認行為,阻止方法,
事件介紹
頁面上有好多事件，也可以多個元素回響一個事件.假如:
<BODY onclick="alert('aaa');"><div onclick="alert('bbb');"> <a href="#" class="cooltip" title="這是我的超連結提示1。" onclick="alert('ddd');"> 提示 </a></div></BODY>上面這段代碼一共有三個事件,body，div，a都分別綁定了單擊事件。在頁面中當單擊a標籤會連續彈出3個提示框。這就是事件冒泡引起的現象。事件冒 泡的過程是：a --> div --> body 。a冒泡到div冒泡到body。
引發問題
本來在上面的代碼中只想觸發<a>元素的onclick事件，然而<div>,<body>事件也同時 觸發了。因此我們必須要對事件的作用範圍進行限制。當單擊<a>元素的onclick事件時只觸發<a>本身的事件。由於IE- DOM和標準DOM實現事件對象的方法各不相同，導致在不同瀏覽器中獲取事件的對象變得比較困難。如果想阻止事件的傳遞，我們可以用 event.stopPropagation()阻止事件的傳遞行為.
阻止事件
<!DOCTYPE html><html> <head> <meta charset = "utf-8" > <script type = "text/javascript" >var onBodyClickFn = function() { alert("我是body上事件");}window.onload = function() { var body = document.body; body.addEventListener('click', onBodyClickFn, false); // false 冒泡階段 //停止事件冒泡 document.getElementById("stopBubble").addEventListener("click", function(event) { alert("我是stopBubble_btn上事件"); event.stopPropagation(); }, false); //正常事件冒泡 document.getElementById("bubble").addEventListener("click", function() { alert("我是bubble_btn上事件"); }, false);}; </script></head > <body > <button id = 'stopBubble' > 阻止冒泡 < /button><button id="bubble">正常事件冒泡</button > </body></html> 擴展封裝
$("element").bind("click",function(event){ //event為事件對象 //......... event.stopPropagation(); //停止事件冒泡 });阻止默認行為
網頁中的某些元素是有自己的默認行為的，比如超連結單擊後需要跳轉，提交按鈕點擊後需要提交表單，有時需要阻止這些行為，也就是默認行為。
jquery中可用用preventDefault()的方法來阻止元素的默認行為.
$('#submit').bind('click',function(event) { var username = $('#username').val(); if (username == "") { alert('用戶名不能為空!'); event.preventDefault(); //阻止默認行為 }})阻止方法
jquery中對冒泡和默認行為的阻止方法同樣也可以改寫，改寫後能夠達到同樣的效果
event.preventDefault(); 改寫為： return false;event.stopPropagation(); 改寫為： return false;
