代码测试:
<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>
结果分析:
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对象大同小异,但还是有些许区别的,大家是否了解了呢