JS和JQ的event对象区别分析
代码测试：
<divid="test"><p>testtext<p></div>
<scriptsrc="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>
结果分析：
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是不行的：
虽然JS,JQ中event对象大同小异，但还是有些许区别的，大家是否了解了呢
varview=Backbone.View.extend({
el:document.body,
events:{
"clickp":"showText" //委托body监听p的click事件 },
showText:function(e){
varp=e.currentTarget; //[currentTarget]获取选择器匹配的元素 this.log(p.innerHTML); //看到了吧，this并不指向p元素 },
log:function(msg){
console.log(msg);
}
});
相关文章