teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

追記ではjQueryの実装に対する反応が無いと判断し、自己解答に投稿。このため、該当の追記箇所を削除

2015/09/16 17:15

投稿

sounisi5011
sounisi5011

スコア697

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の実装を元にしたコードを追加

2015/09/16 17:15

投稿

sounisi5011
sounisi5011

スコア697

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

動作が違うコードでは問題を解決できない趣旨を追記

2015/08/25 22:25

投稿

sounisi5011
sounisi5011

スコア697

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

タイトルを修正

2015/08/25 14:39

投稿

sounisi5011
sounisi5011

スコア697

title CHANGED
@@ -1,1 +1,1 @@
1
- DOMとクロージャによる循環参照の解決方法
1
+ DOMとクロージャによる循環参照問題の解決方法
body CHANGED
File without changes

1

event.targetをthisと等価であると誤解していたため、event.currentTargetに修正

2015/08/25 14:18

投稿

sounisi5011
sounisi5011

スコア697

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オブジェクトのtargetプロパティを利用
43
+ // EventオブジェクトのcurrentTargetプロパティを利用
44
- console.log(e.target);
44
+ console.log(e.currentTarget);
45
45
  };
46
46
 
47
47
  return function (targetNode) {