jquery事件

jquery Event對象的屬性和方法

 

currentTarget

當前的dom對象

 

data

綁定事件處理器時設置的數據:

target.on("click", {value:「this is data」}, function(e){

console.log(e.data.value);

});

輸出: this is data

 

delegateTarget

使用delegate方法綁定的dom元素

 

isDefaultPrevented()

是否調用了preventDefault()

 

isImmediatePropagation()

是否調用了stopImmediatePropagation()

 

isPropagationStopped()

是否調用了stopPropagation()

 

namespace

事件的namespace

 

pageX

相對於document頁面右上角x軸座標

 

pageY

向對應document頁面右上角y軸座標

 

preventDefault()

阻止事件的默認行爲

 

relatedTarget

與事件相關聯的dom對象，

 

result

當在同一個dom對象，同一個事件綁定多個處理函數，jquery會把前一個處理函數的返回值設置到event的result屬性上，而後傳遞到下一個處理函數。

 

topImmediatePropagation()

中止事件冒泡，並再也不調用這個dom事件上綁定的候選處理函數。

 

stopPropagation()

中止事件冒泡

 

target

觸發事件的dom對象

 

timeStamp

事件觸發的時間戳

 

type

事件類型，如: click, dbclick等。

 

which

表示鼠標或鍵盤的鍵

 

originalEvent

瀏覽器原始的事件對象

 

事件處理函數中收的jquery的事件是隻讀：

target.click(functon(e){

e.result = "test";

});

target.click(function(e){

console.log(e.result);

});

輸出: undefined

 

單若是事件的屬性是object類型的，是能夠修改這個這個object的屬性的：

target.click(functon(e){

e.originalEvent.test = "event data";

});

target.click(function(e){

console.log(e.originalEvent.test);

});

輸出: event data

 

事件的綁定和解綁

jquery提供了3組方法實現事件的綁定和解綁:

on(event, [selector], [data], fn)/off(event, [selector], [fn]) 只要可以匹配selector的dom對象都會綁定這個事件，即便dom對象是on函數調用以後添加的。

bind(event, [data], fn)/unbind(event, [fn]) 和on不一樣，bind只能對以前已經存在的dom起做用。

one(event, [data], fn) 和bind大體同樣，不一樣的是隻觸發一次就會自動unbind

 

事件觸發

事件除了經過輸入設備觸發之外，還能夠經過程序觸發。

trigger(event, [data]) 觸發事件

trigggerHandler(event, [data]) 觸發事件。和trigger的不一樣是：不能觸發瀏覽器默認事件, 不會執行瀏覽器的默認處理動做。只觸發jquery對象集合中第一個元素的事件，且觸發的事件不會冒泡。

 

事件冒泡

事件冒泡是指，當一個dom對象上觸發了一個事件。這個事件會沿dom樹向上傳遞，直到root對象爲止。在事件冒泡傳遞過程當中，默認狀況下任何在冒泡路徑上綁定的該事件的處理函數都會被調用。若是有一個dom對象上的事件處理函數調用事件對象的stopPropagation()方法中止了事件的冒泡行爲，那麼這個dom對象的父元素將不會收到這個冒泡事件。

示例:

<div class="layer0" style="width:100px;height:100px;margin:10:px; background:#0062CC">

<div class="layer1" style="width:80px;height:80px;;margin:10:px;background:#2AC845;">

<div class="layer2" style="width:60px;height:60px;;margin:10:px;background:#007AFF;"></div>

</div>

</div>

<script>

$(function(){

$(".layer0").click(function(e){

console.log("layer0 dtest:"+e.originalEvent.test);

});

$(".layer1").click(function(e){

console.log("layer1 dtest:"+e.originalEvent.test);

});

$(".layer2").click(function(e){

e.originalEvent.test = "mouse click";

});

$(".layer2").click(function(e){

console.log("layer2 dtest:"+e.originalEvent.test);

});

let event = $.Event("click");

event.originalEvent = {test: "trigger"};

$(".layer2").trigger(event);

}):

</script>

頁面加載完成以後輸出:

layer2 dtest:trigger

layer1 dtest:trigger

layer0 dtest:trigger

鼠標點擊layer2以後輸出

layer2 dtest:mouse click

layer1 dtest:mouse click

layer0 dtest:mouse click