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是不行的:
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); } });
虽然JS,JQ中event对象大同小异,但还是有些许区别的,大家是否了解了呢