摘要 js和jq的event对象大同小异，本文简单对比下它们的'click'事件下的不同和应用
代码测试：
| 1 2 3 4 5 6 7 | <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> |
结果分析：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 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参数中，不管是
因此，在实际应用中，如果要引用parent,那你只能使用target,toElement,srcElement都是指向第一个触发事件的元素（还没冒泡），而fromElement在click事件中为null，所以，你如果是设置包含很多元素的父容器parent事件，那么触发事件的很可能是这个parent的子元素。this了jq的event参数中,
currentTarget是匹配你选择器的元素，就是你的所要元素；delegateTarget是在监听事件的元素，属于被委托的元素target同js的event参数里的target，是第一个触发事件的元素，没currentTarget有用（也不一定，比如在bodyclick事件中的应用）
有同学可能说，你要直接引用被设备事件的元素用this就得啦，何必理解currentTarget和target呢。这个想法证明你还只是用下jQuery而已，没用过类似Backbone之类的工具。
Backbone很多地方绑定了this,所以在它的函数中用this是不行的：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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); } }); |