質問編集履歴
5
追記ではjQueryの実装に対する反応が無いと判断し、自己解答に投稿。このため、該当の追記箇所を削除
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -181,61 +181,3 @@
|
|
|
181
181
|
|
|
182
182
|
|
|
183
183
|
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
|
184
|
-
|
|
185
|
-
---
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
[jQuery 1.11.3](http://code.jquery.com/jquery-1.11.3.js)の実装を見たところ、以下のようにしてメモリリークを回避しているようです。
|
|
190
|
-
|
|
191
|
-
(4306~4417行目)
|
|
192
|
-
|
|
193
|
-
```JavaScript
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
|
|
197
|
-
* @param {Node} targetNode
|
|
198
|
-
|
|
199
|
-
*/
|
|
200
|
-
|
|
201
|
-
function clickCaptcha(targetNode) {
|
|
202
|
-
|
|
203
|
-
var eventHandle = function () {
|
|
204
|
-
|
|
205
|
-
var targetNode = eventHandle.elem;
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
console.log(targetNode);
|
|
210
|
-
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
|
|
214
|
-
|
|
215
|
-
eventHandle.elem = targetNode;
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
// Bind the global event handler to the element
|
|
220
|
-
|
|
221
|
-
if (targetNode.addEventListener) {
|
|
222
|
-
|
|
223
|
-
targetNode.addEventListener('click', eventHandle, false);
|
|
224
|
-
|
|
225
|
-
} else if (targetNode.attachEvent) {
|
|
226
|
-
|
|
227
|
-
targetNode.attachEvent('onclick', eventHandle);
|
|
228
|
-
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
// Nullify elem to prevent memory leaks in IE
|
|
234
|
-
|
|
235
|
-
targetNode = null;
|
|
236
|
-
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
この処理は、循環参照の解決策としてアリなのでしょうか。
|
4
jQuery 1.11.3の実装を元にしたコードを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -170,8 +170,6 @@
|
|
|
170
170
|
|
|
171
171
|
冒頭のコードを、循環参照が発生せず、また変数`targetNode`を参照できるようにするには、どのようにすれば良いでしょうか。
|
|
172
172
|
|
|
173
|
-
|
|
174
|
-
|
|
175
173
|
---
|
|
176
174
|
|
|
177
175
|
|
|
@@ -183,3 +181,61 @@
|
|
|
183
181
|
|
|
184
182
|
|
|
185
183
|
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
[jQuery 1.11.3](http://code.jquery.com/jquery-1.11.3.js)の実装を見たところ、以下のようにしてメモリリークを回避しているようです。
|
|
190
|
+
|
|
191
|
+
(4306~4417行目)
|
|
192
|
+
|
|
193
|
+
```JavaScript
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
|
|
197
|
+
* @param {Node} targetNode
|
|
198
|
+
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
function clickCaptcha(targetNode) {
|
|
202
|
+
|
|
203
|
+
var eventHandle = function () {
|
|
204
|
+
|
|
205
|
+
var targetNode = eventHandle.elem;
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
console.log(targetNode);
|
|
210
|
+
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
|
|
214
|
+
|
|
215
|
+
eventHandle.elem = targetNode;
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
// Bind the global event handler to the element
|
|
220
|
+
|
|
221
|
+
if (targetNode.addEventListener) {
|
|
222
|
+
|
|
223
|
+
targetNode.addEventListener('click', eventHandle, false);
|
|
224
|
+
|
|
225
|
+
} else if (targetNode.attachEvent) {
|
|
226
|
+
|
|
227
|
+
targetNode.attachEvent('onclick', eventHandle);
|
|
228
|
+
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
// Nullify elem to prevent memory leaks in IE
|
|
234
|
+
|
|
235
|
+
targetNode = null;
|
|
236
|
+
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
この処理は、循環参照の解決策としてアリなのでしょうか。
|
3
動作が違うコードでは問題を解決できない趣旨を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -169,3 +169,17 @@
|
|
|
169
169
|
|
|
170
170
|
|
|
171
171
|
冒頭のコードを、循環参照が発生せず、また変数`targetNode`を参照できるようにするには、どのようにすれば良いでしょうか。
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
循環参照について理解できていないため、動作の違うサンプルを例示されても修正して活用できません。
|
|
180
|
+
|
|
181
|
+
このため、コメントにて私の書いたコードを例示し、何度も指導していただく形になってしまいます。
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
2
タイトルを修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
DOMとクロージャによる循環参照の解決方法
|
|
1
|
+
DOMとクロージャによる循環参照問題の解決方法
|
test
CHANGED
|
File without changes
|
1
event.targetをthisと等価であると誤解していたため、event.currentTargetに修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
|
|
83
83
|
var clickListener = function (e) {
|
|
84
84
|
|
|
85
|
-
// Eventオブジェクトのtargetプロパティを利用
|
|
85
|
+
// EventオブジェクトのcurrentTargetプロパティを利用
|
|
86
86
|
|
|
87
|
-
console.log(e.target);
|
|
87
|
+
console.log(e.currentTarget);
|
|
88
88
|
|
|
89
89
|
};
|
|
90
90
|
|