事件对象的JS和JQ的差异分析
复制代码代码如下所示:
测试文本
test.addeventlistener(点击功能(e){ console.log(E);},假),
$(# test),(听到咔哒声,功能(e){ console.log(E)});
结果分析:
复制代码代码如下所示:
JS JQ事件常见:{
AltKey:假,
泡泡:真的,
按钮:0,
可撤销:真,
ClientX:58,
ClientY:13,
CtrlKey:假,
offsetx:50,
offsety:5,
PageX:58,
PageY:13,
ScreenX:58,
Screeny:122,
视图:窗口,
其中:1,
类型:点击,
时间戳:1407761742842,
MetaKey:假,
relatedtarget:空,
目标:DIV #测试 / * JQ EVT的目标不是jQuery选择器匹配,可以捕获事件的第一要素,然后泡了当一个选择器匹配的元素。
},
JS JQ事件差异:{
看来,currentTarget:空 / * * /一般是空的
| | div #测试 / * JQ选择器匹配的元素在{ } currentTarget属性,
eventphase:0 | | 2,
toelement:DIV #试验
},
js事件独奏:{
X:58,
y:13,
cancelbubble:假,
CharCode:0,
clipboarddata:未定义,
DataTransfer:空,
defaultprevented:假,
srcelement:DIV #试验,
fromelement:空,
细节:1,
KeyCode:0,
LayerX:58,
LayerY:13,
返回:真
},
JQ事件独奏:{
按钮:未定义,
数据:未定义,
听是谁delegatetarget:DIV #测试 / *这就是元素,
isdefaultprevented:功能,
HandleObj:对象,
jquery211024030584539286792:真,
originalevent:MouseEvent,
ShiftKey:假
}
主体单击委托事件:{
htmlbodyelement currentTarget,
DelegateTarget:htmlbodyelement,
htmldivelement目标:
}
总结:
在JS的事件参数,无论是目标,toelement,srcelement指向第一个触发事件的元素(不泡),和fromelement空,在单击事件如果你设置包含父容器的父事件的诸多要素,然后触发事件可能是父元素的孩子。
因此,在实际应用中,如果您想引用父级,只能使用此
在JQ事件参数,
CurrentTarget is the element that matches your selector, that is what you want.
delegatetarget是听事件的元素,属于委托元。
js事件参数中的目标和目标是触发事件的第一个元素。没有currentTarget是有用的(或,例如,在bodyclick事件)。
有些学生可能会说,你必须用这个直接引用设备的元素。你怎么理解currentTarget和目标这个想法证明了您将使用jQuery,而您还没有使用像骨干这样的工具。
很多地方都有这个功能,所以不可能在它的功能中使用它:
复制代码代码如下所示:
VaR视角= backbone.view.extend({
EL:document.body,
事件:{
P:'showtext p点击 / /身体监控客户端事件},
showtext:功能(e){
var p = e.currenttarget; / / {选择器匹配的元素this.log currentTarget }(p.innerhtml); / /看,这不是指P元素},
日志:函数(MSG){
console.log(MSG);
}
});
虽然JS,JQ事件对象非常相似,但也有一些其他的地方,你知道吗