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/*誰(shuí)在監(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ā)事件的元素(還沒(méi)冒泡),而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ā)事件的元素,沒(méi)currentTarget有用(也不一定,比如在bodyclick事件中的應(yīng)用)
有同學(xué)可能說(shuō),你要直接引用被設(shè)備事件的元素用this就得啦,何必理解currentTarget和target呢。這個(gè)想法證明你還只是用下jQuery而已,沒(méi)用過(guò)類似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方法使用說(shuō)明
- JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解
- js中的preventDefault與stopPropagation詳解
- javascript Event對(duì)象詳解及使用示例
- Javascript Event(事件)的傳播與冒泡
相關(guān)文章
在前端中Proj4.js使用簡(jiǎn)單介紹及進(jìn)階應(yīng)用
這篇文章主要介紹了在前端中Proj4.js使用簡(jiǎn)單介紹及進(jìn)階應(yīng)用的相關(guān)資料,Proj4是一個(gè)用于處理JavaScript里的幾何圖形和坐標(biāo)計(jì)算的庫(kù),它提供了多邊形、點(diǎn)、線等幾何對(duì)象的計(jì)算功能,需要的朋友可以參考下2025-01-01
javascript 獲取iframe里頁(yè)面中元素值的方法
本篇文章主要是對(duì)javascript獲取iframe里頁(yè)面中元素值的方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
bootstrap表單按回車會(huì)自動(dòng)刷新頁(yè)面的解決辦法
這篇文章主要介紹了bootstrap表單按回車會(huì)自動(dòng)刷新頁(yè)面的問(wèn)題及解決辦法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
JavaScript中去掉數(shù)組中的重復(fù)值的實(shí)現(xiàn)方法
百度面試時(shí)問(wèn)的一道題目,蠻常規(guī)的,但是當(dāng)時(shí)自己的回答挺差勁的。現(xiàn)在總結(jié)記錄下~2011-08-08
layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
javascript實(shí)現(xiàn)簡(jiǎn)單放大鏡效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09

