首页 > 代码库 > JS和JQ的event对象对比和应用

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

2024-08-02 16:10:28   219人阅读

 

摘要 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=http://www.mamicode.com/ "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对象对比和应用


联系
我们