JS和JQ的event對象對比和應用

currentTarget 事件冒泡階段所在的DOM

target, originalTarget原始的DOM

代碼測試：

<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);
  }
});