欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery 事件對(duì)象屬性小結(jié)

 更新時(shí)間：2010年04月27日 18:47:13   作者：  
JQuery事件中的Event屬性是經(jīng)常性的被忽略的。大多數(shù)時(shí)間你的確不怎么用它，但有些時(shí)候它還是它還是很有作用的。

使用事件自然少不了事件對(duì)象.  因?yàn)椴煌瑸g覽器之間事件對(duì)象的獲取, 以及事件對(duì)象的屬性都有差異, 導(dǎo)致我們很難跨瀏覽器使用事件對(duì)象.

jQuery中統(tǒng)一了事件對(duì)象,  當(dāng)綁定事件處理函數(shù)時(shí),  會(huì)將jQuery格式化后的事件對(duì)象作為唯一參數(shù)傳入:

$("#testDiv").bind("click", function(event) { });

關(guān)于event對(duì)象的詳細(xì)說(shuō)明, 可以參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event

jQuery事件對(duì)象將不同瀏覽器的差異進(jìn)行了合并, 比如可以在所有瀏覽器中通過(guò) event.target 屬性來(lái)獲取事件的觸發(fā)者(在IE中使用原生的事件對(duì)象, 需要訪問(wèn)event.srcElement).

下面是jQuery事件對(duì)象可以在擴(kuò)瀏覽器支持的屬性:

屬性名稱 描述舉例
type 事件類型.如果使用一個(gè)事件處理函數(shù)來(lái)處理多個(gè)事件, 可以使用此屬性獲得事件類型,比如click. 
$("a").click(function(event) { 
alert(event.type); 
});
target 獲取事件觸發(fā)者DOM對(duì)象 
$("a[href=http://google.com]").click(function(event) { 
alert(event.target.href); 
});
data 事件調(diào)用時(shí)傳入額外參數(shù). 
$("a").each(function(i) { 
$(this).bind('click', {index:i}, function(e){ 
alert('my index is ' + e.data.index); 
}); 
});
relatedTarget 對(duì)于鼠標(biāo)事件, 標(biāo)示觸發(fā)事件時(shí)離開(kāi)或者進(jìn)入的DOM元素 
$("a").mouseout(function(event) { 
alert(event.relatedTarget); 
});
currentTarget 冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象, 等同于this. 
$("p").click(function(event) { 
alert( event.currentTarget.nodeName ); 
});

結(jié)果:P

pageX/Y 鼠標(biāo)事件中, 事件相對(duì)于頁(yè)面原點(diǎn)的水平/垂直坐標(biāo). 
$("a").click(function(event) { 
alert("Current mouse position: " + event.pageX + ", " + event.pageY ); 
});
result 上一個(gè)事件處理函數(shù)返回的值 
$("p").click(function(event) { 
return "hey" 
}); 
$("p").click(function(event) { 
alert( event.result ); 
});

結(jié)果:”hey”

timeStamp 事件發(fā)生時(shí)的時(shí)間戳. 
var last; 
$("p").click(function(event) { 
if( last ) 
alert( "time since last event " + event.timeStamp - last ); 
last = event.timeStamp; 
});

上面是jQuery官方文檔中提供的event對(duì)象的屬性. 在”jQuery實(shí)戰(zhàn)”一書(shū)中還提供了下面的多瀏覽器支持的屬性, 時(shí)間關(guān)系我沒(méi)有嘗試每一個(gè)屬性, 大家可以幫忙驗(yàn)證是否在所有瀏覽器下可用:

屬性名稱 描述
altKey Alt鍵是否被按下. 按下返回true
ctrlKey ctrl鍵是否被按下, 按下返回true
metaKey Meta鍵是否被按下, 按下返回true.
meta鍵就是PC機(jī)器的Ctrl鍵,或者M(jìn)ac機(jī)器上面的Command鍵
shiftKey Shift鍵是否被按下, 按下返回true
keyCode 對(duì)于keyup和keydown事件返回被按下的鍵. 不區(qū)分大小寫, a和A都返回65.對(duì)于keypress事件請(qǐng)使用which屬性, 因?yàn)閣hich屬性跨瀏覽時(shí)依然可靠.
which 對(duì)于鍵盤事件, 返回觸發(fā)事件的鍵的數(shù)字編碼. 對(duì)于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(hào)(1左,2中,3右).
screenX/Y 對(duì)于鼠標(biāo)事件, 獲取事件相對(duì)于屏幕原點(diǎn)的水平/垂直坐標(biāo)

 

事件對(duì)象除了擁有屬性, 還擁有事件. 有一些是一定會(huì)用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件對(duì)象的函數(shù)列表:

名稱 說(shuō)明舉例
preventDefault() 取消可能引起任何語(yǔ)意操作的事件. 比如<a>元素的href鏈接加載, 表單提交以及click引起復(fù)選框的狀態(tài)切換. 
$("a").click(function(event){ 
event.preventDefault(); 
// do something 
});
isDefaultPrevented() 是否調(diào)用過(guò)

 

preventDefault()

方法

$("a").click(function(event){ 
alert( event.isDefaultPrevented() ); 
event.preventDefault(); 
alert( event.isDefaultPrevented() ); 
});
stopPropagation() 取消事件冒泡 
$("p").click(function(event){ 
event.stopPropagation(); 
// do something 
});
isPropagationStopped() 是否調(diào)用過(guò)

 

stopPropagation()

方法

$("p").click(function(event){ 
alert( event.isPropagationStopped() ); 
event.stopPropagation(); 
alert( event.isPropagationStopped() ); 
});
stopImmediatePropagation() 取消執(zhí)行其他的事件處理函數(shù)并取消事件冒泡.如果同一個(gè)事件綁定了多個(gè)事件處理函數(shù), 在其中一個(gè)事件處理函數(shù)中調(diào)用此方法后將不會(huì)繼續(xù)調(diào)用其他的事件處理函數(shù). 
$("p").click(function(event){ 
event.stopImmediatePropagation(); 
}); 
$("p").click(function(event){ 
// This function won't be executed 
});
isImmediatePropagationStopped() 是否調(diào)用過(guò)

 

stopImmediatePropagation()

方法

$("p").click(function(event){ 
alert( event.isImmediatePropagationStopped() ); 
event.stopImmediatePropagation(); 
alert( event.isImmediatePropagationStopped() ); 
});

這些函數(shù)中  stopPropagation()  是我們最長(zhǎng)用的也是一定會(huì)用到的函數(shù). 相當(dāng)于操作原始event對(duì)象的event.cancelBubble=true來(lái)取消冒泡.

相關(guān)文章

最新評(píng)論