最大35,000円進呈!IPoEはOCN光

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

このQ&Aに関連する最新のQ&A

A 回答 (6件)

#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);

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

曖昧な質問ですが、


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

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

#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から参照しなくなることは確かですので…。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2010/04/09 22:27

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



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? …
    • good
    • 0

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.onc …
    • good
    • 0

//あくいはないんだ。



まっとうなかいとうがつくまで、ひまつぶしに!
http://ganchiku.com/2007/10/before_removechild_r …
にほんごもびみょうだから、えいごは・・・。^^;
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/04/09 22:23

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q登録済みイベントリスナーの情報を取得したい

子画面に別機能をロードするようなページを作成しており、その子画面がオンロードで登録したイベントリスナーをクローズの際に削除するような仕組みにしています。

この処理を行う際、登録済みのリスナー情報を取得できる方法があれば知りたいのですが、方法がわかりません。

(無ければ無いで、管理マネージャーのような仕組みを作成しようと思っています。)

よろしくお願いします。

Aベストアンサー

# No.1 は質問内容を誤読してました。

eventTarget.onclick = function() { .. } のようにレガシーな書き方をしている場合は No.1 のように String 変換すれば内容を取得&編集可能です。

addEventListener/attachEvent した場合はオーサからリスナー登録状況を見ることはできませんので、管理マネージャを自作して下さい。

# たとえば prototype.js では Event.observers にイベントリスナをキャッシュしています。

参考URL:http://prototype.conio.net/

Qは何のためにあるんでしょうか?

ホームページの制作の仕事をして数ヶ月たちます。
参考に、他のウェブサイトを保存してソースを見る事があるのですが、テーブルでレイアウトしているサイトでよく<tbody>タグを使っているところを目にします。(私は使うメリットがわからないので使っていませんが…)
<tbody>を使うことに何かメリットがあるのでしょうか?
もし便利な使い方があれば教えてください。

Aベストアンサー

現在のところ、メリットは無いと思います。

ただし、tbody要素の意味は、テーブルは、複数の行から構成され、一行ごとにtr要素の内容として記述します。テーブルの内容である複数の行を一つのまとまりとして扱いたい(意味づけをしたい)場合に、thead、tfoot、tbody 要素を利用出来ます。
(HTML要素の中もhead, body要素があるような感じで構造化が出来ます)

もちろん、tbody要素は省略可能となっておりますので、省略されても特に支障はありません。

SGMLには省略タグ機構という仕組みがあり、HTMLのSGML宣言はOMITTAG YESとなっていますので、省略タグ機構を用いることが出来ためです。

詳しい説明は、下記URLの説明を参照してください。
http://www1.u-netsurf.ne.jp/~7l1rll/SGMLsec6_0.html#3_1_1

また、XMLを基に再定義されたXHTMLでもtbody要素は省略可能です。
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd

 <!ELEMENT table
   (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

このように定義されたいますので、現在のところテーブルの構造を構造化(視覚的にではなく)したい場合を除き、tbody要素を使うメリットは無いと思います。

強いて言えば、見えないオシャレに使って頂ければと思います。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.2.3

現在のところ、メリットは無いと思います。

ただし、tbody要素の意味は、テーブルは、複数の行から構成され、一行ごとにtr要素の内容として記述します。テーブルの内容である複数の行を一つのまとまりとして扱いたい(意味づけをしたい)場合に、thead、tfoot、tbody 要素を利用出来ます。
(HTML要素の中もhead, body要素があるような感じで構造化が出来ます)

もちろん、tbody要素は省略可能となっておりますので、省略されても特に支障はありません。

SGMLには省略タグ機構という仕組みがあり、HTMLのSGM...続きを読む

Qonchangeイベントを強制的に発生させる

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchange = change;
}


</script>

<input id="1" type="text" value="1" onchange="change();">

<a href="javascript:update();">update</a>

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchan...続きを読む

Aベストアンサー

回答は出てますが・・・onchangeにこだわるなら、

document.getElementById('***').onchange();

()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認)


var f = document.getElementById('***').onchange;
f();

IE6の場合はいったん変数に代入する必要があるようです。

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です(もちろん実行できませんでした)
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。(returnで参照することはできます。)
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す(return aa;)
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>


人気Q&Aランキング