回答編集履歴

3

Dragpos\.prototype\.handleEvent のコード修正

2017/09/06 02:13

投稿

think49
think49

スコア18156

test CHANGED
@@ -48,15 +48,15 @@
48
48
 
49
49
  case 'mousedown':
50
50
 
51
- return this.mouseDown(event);
51
+ return this.mouseDown.call(this, event);
52
52
 
53
53
  case 'mouseup':
54
54
 
55
- return this.mouseUp(event);
55
+ return this.mouseUp.call(this, event);
56
56
 
57
57
  case 'mousemove':
58
58
 
59
- return this.mouseMove(event);
59
+ return this.mouseMove.call(this, event);
60
60
 
61
61
  }
62
62
 

2

typo修正

2017/09/06 02:13

投稿

think49
think49

スコア18156

test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
 
72
72
 
73
- ### Function .prototype.bind
73
+ ### Function.prototype.bind
74
74
 
75
75
 
76
76
 
@@ -78,7 +78,7 @@
78
78
 
79
79
 
80
80
 
81
- `event.currentTarget` に束縛された `this` 値を `Function .prototype.bind` で `new Dragpos` に束縛し直します。
81
+ `event.currentTarget` に束縛された `this` 値を `Function.prototype.bind` で `new Dragpos` に束縛し直します。
82
82
 
83
83
 
84
84
 

1

サンプルコードを追記

2017/09/06 02:06

投稿

think49
think49

スコア18156

test CHANGED
@@ -6,4 +6,162 @@
6
6
 
7
7
 
8
8
 
9
+ **(2017/09/06 11:05追記)**
10
+
11
+ サンプルコードを追記しました。
12
+
13
+
14
+
15
+ ### addEventListener + handleEvent
16
+
17
+
18
+
19
+ `addEventListener` は第二引数に `handleEvent` プロパティを持つオブジェクトを指定した場合、`this` 値を指定したオブジェクトに束縛することが出来ます。
20
+
21
+
22
+
23
+ - [EventTarget.addEventListener - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
24
+
25
+
26
+
27
+ ```JavaScript
28
+
29
+ function Dragpos (element) {
30
+
31
+ // 中略
32
+
33
+
34
+
35
+ document.addEventListener('mousedown', this, false);
36
+
37
+ document.addEventListener('mouseup', this, false);
38
+
39
+ document.addEventListener('mousemove', this, false);
40
+
41
+ }
42
+
43
+
44
+
45
+ Dragpos.prototype.handleEvent = function handleEvent (event) {
46
+
47
+ switch (event.type) {
48
+
49
+ case 'mousedown':
50
+
51
+ return this.mouseDown(event);
52
+
53
+ case 'mouseup':
54
+
55
+ return this.mouseUp(event);
56
+
57
+ case 'mousemove':
58
+
59
+ return this.mouseMove(event);
60
+
61
+ }
62
+
63
+
64
+
65
+ throw new Error('unknown event type');
66
+
67
+ };
68
+
69
+ ```
70
+
71
+
72
+
73
+ ### Function .prototype.bind
74
+
75
+
76
+
77
+ - [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
78
+
79
+
80
+
81
+ `event.currentTarget` に束縛された `this` 値を `Function .prototype.bind` で `new Dragpos` に束縛し直します。
82
+
83
+
84
+
85
+ ```JavaScript
86
+
87
+ document.addEventListener('mousedown', this.mouseDown.bind(this), false);
88
+
89
+ document.addEventListener('mouseup', this.mouseUp.bind(this), false);
90
+
91
+ document.addEventListener('mousemove', this.mouseMove.bind(this), false);
92
+
93
+ ```
94
+
95
+
96
+
97
+ ### jQuery.proxy
98
+
99
+
100
+
101
+ - [jQuery.proxy() | jQuery API Documentation](https://api.jquery.com/jQuery.proxy/)
102
+
103
+
104
+
105
+ `Function .prototype.bind` と同様。
106
+
107
+
108
+
109
+ ```JavaScript
110
+
111
+ document.addEventListener('mousedown', jQuery.proxy(this.mouseDown, this), false);
112
+
113
+ document.addEventListener('mouseup', jQuery.proxy(this.mouseUp, this), false);
114
+
115
+ document.addEventListener('mousemove', jQuery.proxy(this.mouseMove, this), false);
116
+
117
+ ```
118
+
119
+
120
+
121
+ ### jQuery.prototype.on + event.data
122
+
123
+
124
+
125
+ - [.on() | jQuery API Documentation](https://api.jquery.com/on/)
126
+
127
+ - [event.data | jQuery API Documentation](https://api.jquery.com/event.data/)
128
+
129
+
130
+
131
+ `this` から取り出すのを諦めて、`jQuery.prototype.on` の `event.data` 経由で `this` 値を参照します。
132
+
133
+
134
+
135
+ ```JavaScript
136
+
137
+ function Dragpos (element) {
138
+
139
+ // 中略
140
+
141
+
142
+
143
+ jQuery(document).on('mousemove', {thisArg: this}, this.mouseMove);
144
+
145
+ }
146
+
147
+
148
+
149
+ Dragpos.prototype.mouseMove = function mouseMove (event) {
150
+
151
+ var thisArg = event.data.thisArg;
152
+
153
+
154
+
155
+ if (thisArg.drag) {
156
+
157
+ console.log(thisArg.panel);
158
+
159
+ }
160
+
161
+ };
162
+
163
+ ```
164
+
165
+
166
+
9
167
  Re: nnahito さん