JS和JQ的event對(duì)象區(qū)別分析
代碼測(cè)試:
<div id="test"><p>test text<p></div>
<script src="vendor/jquery-2.1.1.js"></script>
<script>
test.addEventListener('click', function(e){console.log(e);}, false),
$('#test').on('click', function(e){console.log(e)});
</script>
結(jié)果分析:
js-jq-event-common:{
altKey: false,
bubbles: true,
button: 0,
cancelable: true,
clientX: 58,
clientY: 13,
ctrlKey: false,
offsetX: 50,
offsetY: 5,
pageX: 58,
pageY: 13,
screenX: 58,
screenY: 122,
view: Window,
which: 1,
type: 'click',
timeStamp: 1407761742842,
metaKey: false,
relatedTarget: null,
target: div#test /*jq-evt的target不一定是jQuery選擇器匹配的元素,可能是第一個(gè)捕獲事件的元素,然后向上冒泡時(shí)其中一個(gè)才是選擇器匹配的元素*/
},
js-jq-event-diff:{
currentTarget: null/*貌似一般都為null*/
|| div#test/*jq選擇器匹配的元素在[currentTarget]屬性*/,
eventPhase: 0 || 2,
toElement: div#test
},
js-event-solo:{
x: 58,
y: 13,
cancelBubble: false,
charCode: 0,
clipboardData: undefined,
dataTransfer: null,
defaultPrevented: false,
srcElement: div#test,
fromElement: null,
detail: 1,
keyCode: 0,
layerX: 58,
layerY: 13,
returnValue: true
},
jq-event-solo: {
buttons: undefined,
data: undefined,
delegateTarget: div#test/*誰在監(jiān)聽?就是這個(gè)元素啦。*/,
isDefaultPrevented: function,
handleObj: Object,
jQuery211024030584539286792: true,
originalEvent: MouseEvent,
shiftKey: false
}
body-click-delegate-event: {
currentTarget: HTMLBodyElement,
delegateTarget: HTMLBodyElement,
target: HTMLDivElement
}
總結(jié):
js的event參數(shù)中,不管是target, toElement, srcElement都是指向第一個(gè)觸發(fā)事件的元素(還沒冒泡),而fromElement在click事件中為null,所以,你如果是設(shè)置包含很多元素的父容器parent事件,那么觸發(fā)事件的很可能是這個(gè)parent的子元素。
因此,在實(shí)際應(yīng)用中,如果要引用parent,那你只能使用this了
jq的event參數(shù)中,
currentTarget是匹配你選擇器的元素,就是你的所要元素;
delegateTarget是在監(jiān)聽事件的元素,屬于被委托的元素
target同js的event參數(shù)里的target,是第一個(gè)觸發(fā)事件的元素,沒currentTarget有用(也不一定,比如在bodyclick事件中的應(yīng)用)
有同學(xué)可能說,你要直接引用被設(shè)備事件的元素用this就得啦,何必理解currentTarget和target呢。這個(gè)想法證明你還只是用下jQuery而已,沒用過類似Backbone之類的工具。
Backbone很多地方綁定了this,所以在它的函數(shù)中用this是不行的:
var view = Backbone.View.extend({
el: document.body,
events: {
'click p': 'showText' // 委托body監(jiān)聽p的click事件 },
showText: function(e){
var p = e.currentTarget; // [currentTarget]獲取選擇器匹配的元素 this.log(p.innerHTML); // 看到了吧,this并不指向p元素 },
log: function(msg){
console.log(msg);
}
});
雖然JS,JQ中event對(duì)象大同小異,但還是有些許區(qū)別的,大家是否了解了呢
- js event事件的傳遞與冒泡處理
- Nodejs實(shí)戰(zhàn)心得之eventproxy模塊控制并發(fā)
- JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
- JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
- javascript中attachEvent用法實(shí)例分析
- Node.js事件循環(huán)(Event Loop)和線程池詳解
- node.js中的events.emitter.once方法使用說明
- JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解
- js中的preventDefault與stopPropagation詳解
- javascript Event對(duì)象詳解及使用示例
- Javascript Event(事件)的傳播與冒泡
相關(guān)文章
javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例,需要的朋友可以參考下2014-08-08Bootstrap實(shí)現(xiàn)圓角、圓形頭像和響應(yīng)式圖片
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)圓角、圓形頭像和響應(yīng)式圖片的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js對(duì)象數(shù)組和對(duì)象的使用實(shí)例詳解
在本篇文章里小編給大家整理了關(guān)于js對(duì)象數(shù)組和對(duì)象的使用實(shí)例相關(guān)知識(shí)點(diǎn),有需要的朋友們學(xué)習(xí)下。2019-08-08Javascript 兩個(gè)窗體之間傳值實(shí)現(xiàn)代碼
眾所周知window.open() 函數(shù)可以用來打開一個(gè)新窗口,那么如何在子窗體中向父窗體傳值呢,其實(shí)通過window.opener即可獲取父窗體的引用。2009-09-09