标签：style blog http io ar os 使用 sp div
摘要 js和jq的event对象大同小异，本文简单对比下它们的‘click‘事件下的不同和应用
代码测试：
|
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);
}
});
|
标签：style blog http io ar os 使用 sp div
原文地址：http://my.oschina.net/u/1865850/blog/345637
