DOM要素を削除しても、イベントは消えないのでしょうか？

質問

恥ずかしながら、質問します。
（自分で調べろって言わないで）
例えば、
element.onclick=function(){
－－－－－－
}
で作った匿名コールバック関数（？）は、そのelement
を削除しても、残っていて、悪影響するんでしょうか、
element.onclick=(function(){
　return function(){
　－－－－－－
　}
})();
としても同様でしょうか？

回答No.6

think49 · ベストアンサー

#2～4です。
#4のお礼より引用。

> でも、そんなに多量に追加・削除を繰り返しが想定さなければ、たぶん許されそうな....
まあ、そうですよね。
参照できないところにあるのですし、よほどメモリを圧迫していなければ問題は出そうにないですね。

ただ…。例えば、先の回答のように click を3つ定義する実装があったとして。
私なら、一つだけイベント定義しちゃいます。

document./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (evt) {
var targetNode = evt.target || evt.srcElement; // イベント呼び出し元の要素ノード
switch(targetNode.id){
case 'Hello':
// 処理
break;
case 'Delete':
// 処理
break;
case 'View':
// 処理
break;
default:
return false; // それ以外は処理を行わない
}
evt.preventDefault ? evt.preventDefault() : evt.returnValue = false; // デフォルト動作を無効に
},false);

イベントそのものは一つなので、匿名関数内部で制御構造を工夫すれば特定条件下で処理を回避する事も簡単にできます。

回答No.5

notnot

曖昧な質問ですが、
「ウェブページのHTML上のあるDOM要素にon～のイベントであるJavaScript処理を設定した状態で、そのDOM要素をHTMLから削除した場合、削除後のウェブページにキーボードやマウスで何かの操作をして、設定してあったJavaScript処理を実行する手段があるか？（実行されるか？）」
と言うことであれば、「実行されない」だと思いますが。

HTMLから削除したDOM要素を、削除する前に変数に保存してあれば、その変数を経由して処理を呼び出すことは可能ですね。保存してあれば残るのは当然。

回答No.4

think49

#2,3 です。

申し訳ありません。質問の意図を勘違いしていました。
「イベントハンドラが削除されるのか」ですね。
再び、検証してみました。

-----------
<p id="Hello">Hello, World!</p>
<p id="Delete">Delete</p>
<p id="View">View</p>
<script type="text/javascript">
<!--
document.getElementById('Hello').onclick = function(evt){
console.log('Hello, world!');
};

var helloElement = document.getElementById('Hello');
var helloEventHandler = document.getElementById('Hello').onclick; // イベントハンドラを格納する

document.getElementById('Delete').onclick = function(evt){
// document.getElementById('Hello').onclick = null; // イベントハンドラを削除
document.getElementById('Hello').parentNode.removeChild(document.getElementById('Hello')); // 要素を削除
};
document.getElementById('View').onclick = function(evt){
console.log(helloElement); // Hello要素ノードを表示
console.log(helloEventHandler); // イベントハンドラを表示
helloEventHandler(); // onclickで参照される function を実行
};
-->
</script>
-----------

Firebugでコンソールを確認してみてください。
イベントハンドラを削除しない場合は、helloElementを辿っていくと、onclickにfunctionが格納されていることがわかります。
イベントハンドラを削除すれば、nullが格納されます。
つまり、

> DOM要素を削除しても、イベントは消えないのでしょうか？
に対する回答は「削除されない」ですね。

実際にどんな影響を及ぼすかはわかりませんが、とりあえず、null で埋めておくのがベターかと思います。
function 自体はメモリから解放されませんが、少なくともonclickから参照しなくなることは確かですので…。

お礼

わざわざテストして調べてくださって有難うございます。
本来、自分で試せるぐらいの人なんですが。

やはり、自分で追加したイベントはちゃんと始末するべきなんですね。
でも、そんなに多量に追加・削除を繰り返しが想定さなければ、
たぶん許されそうな．．．．

回答No.3

think49

ちなみに、イベントを削除する方法は、

document.getElementById('Hello').onclick = null;

でいいはずなんですが、変数に待避させた値は残っちゃってますね。
Deleteをクリックすることでonclickが作用しないことは確認できるのですが…。
イベントオブジェクトの参照ではなく、コピーが格納されてしまっているのでしょうか。

---------
<p id="Hello">Hello, World!</p>
<p id="Delete">Delete</p>
<p id="View">View</p>
<script type="text/javascript">
<!--
var helloEvent;

document.getElementById('Hello').onclick = function(evt){
helloEvent = evt ? evt : window.event; // イベントオブジェクトを格納する
console.log('Hello, world!');
};

document.getElementById('Delete').onclick = function(evt){
document.getElementById('Hello').onclick = null; // イベントオブジェクトを削除
document.getElementById('Hello').parentNode.removeChild(document.getElementById('Hello')); // 要素を削除
};
document.getElementById('View').onclick = function(evt){
console.log(helloEvent); // イベントオブジェクトを表示
};
-->
</script>
---------

掲示板/JavaScript質問板/onclickで定義したイベントリスナを削除するには？ - TAG index Webサイト
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2568

回答No.2

think49

Firefox3.6, IE8でイベントを定義した要素ノードを削除しても、イベントオブジェクトが残ることを確認しました。

---------
<p id="Hello">Hello, World!</p>
<p id="Delete">Delete</p>
<script type="text/javascript">
<!--
var helloEvent;

document.getElementById('Hello').onclick = function(evt){
helloEvent = evt ? evt : window.event; // イベントオブジェクトを格納する
console.log(helloEvent); // イベントオブジェクトを表示
};

document.getElementById('Delete').onclick = function(evt){
document.getElementById('Hello').parentNode.removeChild(document.getElementById('Hello')); // 要素を削除
console.log(helloEvent); // イベントオブジェクトを表示
};
-->
</script>
---------

event - MDC
https://developer.mozilla.org/ja/DOM/event
element.onclick - MDC
https://developer.mozilla.org/en/DOM/element.onclick

回答No.1

babu_baboo

//あくいはないんだ。

まっとうなかいとうがつくまで、ひまつぶしに！
http://ganchiku.com/2007/10/before_removechild_remove_its_all_events.html
にほんごもびみょうだから、えいごは・・・。^^;

お礼

有難うございます。
「removeChildのみならずreplaceChildのときも必要！さらに、innerHTMLで内でEventを指定していた要素にも必要」
なんですね。
全然気にしてませんでした。