質問編集履歴
5
追記ではjQueryの実装に対する反応が無いと判断し、自己解答に投稿。このため、該当の追記箇所を削除
title
CHANGED
File without changes
|
body
CHANGED
@@ -89,33 +89,4 @@
|
|
89
89
|
循環参照について理解できていないため、動作の違うサンプルを例示されても修正して活用できません。
|
90
90
|
このため、コメントにて私の書いたコードを例示し、何度も指導していただく形になってしまいます。
|
91
91
|
|
92
|
-
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
92
|
+
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
93
|
-
---
|
94
|
-
|
95
|
-
[jQuery 1.11.3](http://code.jquery.com/jquery-1.11.3.js)の実装を見たところ、以下のようにしてメモリリークを回避しているようです。
|
96
|
-
(4306~4417行目)
|
97
|
-
```JavaScript
|
98
|
-
/**
|
99
|
-
* @param {Node} targetNode
|
100
|
-
*/
|
101
|
-
function clickCaptcha(targetNode) {
|
102
|
-
var eventHandle = function () {
|
103
|
-
var targetNode = eventHandle.elem;
|
104
|
-
|
105
|
-
console.log(targetNode);
|
106
|
-
};
|
107
|
-
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
|
108
|
-
eventHandle.elem = targetNode;
|
109
|
-
|
110
|
-
// Bind the global event handler to the element
|
111
|
-
if (targetNode.addEventListener) {
|
112
|
-
targetNode.addEventListener('click', eventHandle, false);
|
113
|
-
} else if (targetNode.attachEvent) {
|
114
|
-
targetNode.attachEvent('onclick', eventHandle);
|
115
|
-
}
|
116
|
-
|
117
|
-
// Nullify elem to prevent memory leaks in IE
|
118
|
-
targetNode = null;
|
119
|
-
}
|
120
|
-
```
|
121
|
-
この処理は、循環参照の解決策としてアリなのでしょうか。
|
4
jQuery 1.11.3の実装を元にしたコードを追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -84,10 +84,38 @@
|
|
84
84
|
よって、これも採用できません。
|
85
85
|
|
86
86
|
冒頭のコードを、循環参照が発生せず、また変数`targetNode`を参照できるようにするには、どのようにすれば良いでしょうか。
|
87
|
-
|
88
87
|
---
|
89
88
|
|
90
89
|
循環参照について理解できていないため、動作の違うサンプルを例示されても修正して活用できません。
|
91
90
|
このため、コメントにて私の書いたコードを例示し、何度も指導していただく形になってしまいます。
|
92
91
|
|
93
|
-
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
92
|
+
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
93
|
+
---
|
94
|
+
|
95
|
+
[jQuery 1.11.3](http://code.jquery.com/jquery-1.11.3.js)の実装を見たところ、以下のようにしてメモリリークを回避しているようです。
|
96
|
+
(4306~4417行目)
|
97
|
+
```JavaScript
|
98
|
+
/**
|
99
|
+
* @param {Node} targetNode
|
100
|
+
*/
|
101
|
+
function clickCaptcha(targetNode) {
|
102
|
+
var eventHandle = function () {
|
103
|
+
var targetNode = eventHandle.elem;
|
104
|
+
|
105
|
+
console.log(targetNode);
|
106
|
+
};
|
107
|
+
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
|
108
|
+
eventHandle.elem = targetNode;
|
109
|
+
|
110
|
+
// Bind the global event handler to the element
|
111
|
+
if (targetNode.addEventListener) {
|
112
|
+
targetNode.addEventListener('click', eventHandle, false);
|
113
|
+
} else if (targetNode.attachEvent) {
|
114
|
+
targetNode.attachEvent('onclick', eventHandle);
|
115
|
+
}
|
116
|
+
|
117
|
+
// Nullify elem to prevent memory leaks in IE
|
118
|
+
targetNode = null;
|
119
|
+
}
|
120
|
+
```
|
121
|
+
この処理は、循環参照の解決策としてアリなのでしょうか。
|
3
動作が違うコードでは問題を解決できない趣旨を追記
title
CHANGED
File without changes
|
body
CHANGED
@@ -83,4 +83,11 @@
|
|
83
83
|
私自身もこの関数が循環参照を回避できる理由が理解できていないため、下手に改良もできません。
|
84
84
|
よって、これも採用できません。
|
85
85
|
|
86
|
-
冒頭のコードを、循環参照が発生せず、また変数`targetNode`を参照できるようにするには、どのようにすれば良いでしょうか。
|
86
|
+
冒頭のコードを、循環参照が発生せず、また変数`targetNode`を参照できるようにするには、どのようにすれば良いでしょうか。
|
87
|
+
|
88
|
+
---
|
89
|
+
|
90
|
+
循環参照について理解できていないため、動作の違うサンプルを例示されても修正して活用できません。
|
91
|
+
このため、コメントにて私の書いたコードを例示し、何度も指導していただく形になってしまいます。
|
92
|
+
|
93
|
+
可能であれば、「第一引数に受けたDOM Nodeにclickイベントを定義」する、質問本文冒頭のコードと同じ動作をする循環参照を解決したコードを例示していただければ有難いです。
|
2
タイトルを修正
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
DOMとクロージャによる循環参照の解決方法
|
1
|
+
DOMとクロージャによる循環参照問題の解決方法
|
body
CHANGED
File without changes
|
1
event.targetをthisと等価であると誤解していたため、event.currentTargetに修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -40,8 +40,8 @@
|
|
40
40
|
var clickCaptcha = (function () {
|
41
41
|
// イベントのリスナーを外部に出すことでクロージャを回避
|
42
42
|
var clickListener = function (e) {
|
43
|
-
// Eventオブジェクトの
|
43
|
+
// EventオブジェクトのcurrentTargetプロパティを利用
|
44
|
-
console.log(e.
|
44
|
+
console.log(e.currentTarget);
|
45
45
|
};
|
46
46
|
|
47
47
|
return function (targetNode) {
|