JS和JQ的event对象对比和应用

 

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