一、冒泡事件簡介
當我們點擊一個控件的時候,如果包括這個控件的父控件也有click事件,則會繼續執行。
比如:div下的a都有click事件,點擊a的時候,會alert出現2次。這個現象叫做冒泡事件。
這個事件從原始元素開始一直冒泡到DOM樹的最上層。
目標元素: 任何一個事件的目標元素都是最開始的那個元素,在我們的這個例子中也就是按鈕,
並且它在我們的元素對象中以屬性的形式出現。使用事件代理的話我們可以把事 件處理器添加到一個元素上,
等待一個事件從它的子級元素裡冒泡上來,並且可以很方便地得知這個事件是從哪個元素開始。
注意:
blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得(在IE之外的其它浏覽器中)。
二、阻止jQuery事件冒泡
jQuery對DOM的事件觸發具有冒泡特性。有時利用這一特性可以減少重復代碼,但有時候我們又不希望事件冒泡。這個時候就要阻止 jQuery.Event冒泡。
在jQuery.Event的文檔中的開頭得知,jQuery.Event對象是符合W3C標准的一個事件對象,同時jQuery.Event免去了檢查兼容IE的步驟。
jQuery.Event提供了一個非常簡單的方法來阻止事件冒泡:event.stopPropagation();
. 代碼如下:
$("p").click(function(event){
event.stopPropagation();
// do something
})
但是這個方法對使用live綁定的事件沒有作用,需要一個更簡單的方法阻止事件冒泡:return false;
. 代碼如下:
$(this).after("Another paragraph!");
return false; });
兼容多個浏覽器的終止冒泡函數:
. 代碼如下:
function stopDefault(e) {
//阻止默認浏覽器動作(W3C)
if (e && e.preventDefault)
e.preventDefault();
//IE中阻止函數器默認動作的方式
else
window.event.returnValue = false;
return false;
}
三、使用event.tatget屬性 明確事件對象
事件處理程序中的變量event保存著事件對象。而event.tatget屬性保存著發生事件的目標元素。這個屬性是DOM API中規定的,但是沒有被所有浏覽器實現。jQuery對這個事件對象進行了必要的擴展,從而在任何浏覽器中都能夠使用這個屬性。通過.target,可以確定DOM中首先接收到事件的元素。而且,我們知道this引用的是處理事件的DOM元素。
使用event.tatget屬性 明確事件對象
阻止事件冒泡的代碼如下:
. 代碼如下:
$(document).ready(function() {
$('switcher').click(function(event){
if(event.target == this)
{
$('switcher .button').toggleClass('hidden');
}
};)
});