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

標籤：style   blog   http   io   ar   os   使用   sp   div   

 

摘要 js和jq的event對象大同小異，本文簡單對比下它們的‘click‘事件下的不同和應用

js jquery jq event

代碼測試：

?

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參數中，不管是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是不行的：

?

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

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