快捷導(dǎo)航

JS和JQ的event對象區(qū)別分析

更新時間：2014年11月24日 16:52:45 投稿：hebedich

js和jq的event對象大同小異，本文簡單對比下它們的'click'事件下的不同和應(yīng)用，給有需要的小伙伴參考下

代碼測試：

<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>

結(jié)果分析：

復(fù)制代碼代碼如下:

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/*誰在監(jiān)聽？就是這個元素啦。*/, 

  isDefaultPrevented: function, 

  handleObj: Object, 

  jQuery211024030584539286792: true, 

  originalEvent: MouseEvent, 

  shiftKey: false

} 

 body-click-delegate-event: { 

  currentTarget: HTMLBodyElement, 

  delegateTarget: HTMLBodyElement, 

  target: HTMLDivElement 

}

總結(jié)：

js的event參數(shù)中，不管是target, toElement, srcElement都是指向第一個觸發(fā)事件的元素（還沒冒泡），而fromElement在click事件中為null，所以，你如果是設(shè)置包含很多元素的父容器parent事件，那么觸發(fā)事件的很可能是這個parent的子元素。
因此，在實際應(yīng)用中，如果要引用parent,那你只能使用this了
jq的event參數(shù)中,
currentTarget是匹配你選擇器的元素，就是你的所要元素；
delegateTarget是在監(jiān)聽事件的元素，屬于被委托的元素
target同js的event參數(shù)里的target，是第一個觸發(fā)事件的元素，沒currentTarget有用（也不一定，比如在bodyclick事件中的應(yīng)用）
有同學(xué)可能說，你要直接引用被設(shè)備事件的元素用this就得啦，何必理解currentTarget和target呢。這個想法證明你還只是用下jQuery而已，沒用過類似Backbone之類的工具。

Backbone很多地方綁定了this,所以在它的函數(shù)中用this是不行的：

復(fù)制代碼代碼如下:

var view = Backbone.View.extend({ 

  el: document.body, 

   events: { 

    'click p': 'showText'     // 委托body監(jiān)聽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對象大同小異，但還是有些許區(qū)別的，大家是否了解了呢

您可能感興趣的文章: