代码测试:
复制代码 代码如下:
test text
结果分析:
复制代码 代码如下:
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选择器匹配的元素,可能是第一个捕获事件的元素,然后向上冒泡时其中一个才是选择器匹配的元素*/
},
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/*谁在监听?就是这个元素啦。*/,
isdefaultprevented: function,
handleobj: object,
jquery211024030584539286792: true,
originalevent: mouseevent,
shiftkey: false
}
body-click-delegate-event: {
currenttarget: htmlbodyelement,
delegatetarget: htmlbodyelement,
target: htmldivelement
}
总结:
js的event参数中,不管是target, toelement, srcelement都是指向第一个触发事件的元素(还没冒泡),而fromelement在click事件中为null,所以,你如果是设置包含很多元素的父容器parent事件,那么触发事件的很可能是这个parent的子元素。
因此,在实际应用中,如果要引用parent,那你只能使用this了
jq的event参数中,
currenttarget是匹配你选择器的元素,就是你的所要元素;
delegatetarget是在监听事件的元素,属于被委托的元素
target同js的event参数里的target,是第一个触发事件的元素,没currenttarget有用(也不一定,比如在bodyclick事件中的应用)
有同学可能说,你要直接引用被设备事件的元素用this就得啦,何必理解currenttarget和target呢。这个想法证明你还只是用下jquery而已,没用过类似backbone之类的工具。
backbone很多地方绑定了this,所以在它的函数中用this是不行的:
复制代码 代码如下:
var view = backbone.view.extend({
el: document.body,
events: {
'click p': 'showtext' // 委托body监听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对象大同小异,但还是有些许区别的,大家是否了解了呢