removeEventListener：mx-Lab：SSブログ

	ブログをはじめるログイン

addEventListener｜【遊び】逃げるボタンブログトップ

removeEventListener　[JavaScript] [編集]

◆object.removeEventListener メソッド

object.removeEventListener(event, function, capture)

addEventListener メソッドで登録したイベントハンドラを開放するのが、removeEventListener の役割。

attachEvent に対する detachEvent と同じ役割です。

addEventListener 同様、主要なブラウザの中では、Firefox、Safari、Google Chrome が対応しています。

Internet Explorer、Opera は対応していません（これらのブラウザでは、detachEvent を使います）。

組み込みクラスの中で、Object クラス、HTMLDocument クラス、Element クラスなどに準備されているメソッドで、イベントハンドラの開放に使います。

第一引数 event はイベント名文字列（プレフィックスに 'on' を含まない）、第二引数 function は実行するイベントハンドラメソッド、第三引数 capture はキャプチャーです。

removeEventListener でイベントハンドラを開放するときは、ちゃんと addEventListener で登録したときと同じ引数を与えてやりましょう。

はい、今回のソース。

あ、ちなみに、毎回掲載してるこのソース、文章をそのままメモ帳にでも貼り付けて、"index.html" とかのファイル名を付けて保存して、その保存したファイルを、対応してるブラウザ（今回なら Firefox、Safari、Google Chrome）にドラッグアンドドロップすれば、実際に動きを見ることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>removeEventListener</title>
    <script type="text/javascript" >
        //<![CDATA[

        // input text にメッセージ出力
        function outputMessage(strMessage) {
            var elm;
            elm = document.getElementById('Text1');
            elm.value = strMessage;
        }

        // [addEventListener イベントハンドラ] ボタンのイベントハンドラ
        function onClickButton1(evt) {
            var elm = document.getElementById('Button1');
            elm.removeEventListener('click', onClickButton1, false);
            outputMessage('addEventListener イベントハンドラを remove しました。');
        }

        // [匿名関数イベントハンドラ] ボタンのイベントハンドラ
        function onClickButton2(callee) {
            var elm = document.getElementById('Button2');
            elm.removeEventListener('click', callee, false);
            outputMessage('匿名関数イベントハンドラを remove します。');
        }

        // [HTML の onclick イベントハンドラ] ボタンのイベントハンドラ
        function onClickButton3(evt) {
            var elm = document.getElementById('Button3');
            elm.removeEventListener('click', onClickButton3, false);
            outputMessage('HTML の onclick イベントハンドラは remove できません。');
        }

        // [テキストボックスのリセット] ボタンのイベントハンドラ
        function onClickButton4(evt) {
            outputMessage('');
        }

        // ウィンドウロードイベントハンドラ
        function onWindowLoad(evt) {
            window.removeEventListener('load', onWindowLoad, true);
            var elm;
            elm = document.getElementById('Button1');
            elm.addEventListener('click', onClickButton1, false);
            elm = document.getElementById('Button2');
            elm.addEventListener('click', function () { onClickButton2(arguments.callee); }, false);
            outputMessage('Window のロードが完了しました。');
        }

        // ウィンドウロードイベントハンドラの登録
        window.addEventListener('load', onWindowLoad, true);

        //]]>
    </script>
</head>
<body>
    <input id="Text1" type="text" style="width: 50%;" readonly="readonly" value="Window のロード中です。" />
    <br />
    <input id="Button1" type="button" value="addEventListener イベントハンドラ" />
    <br />
    <input id="Button2" type="button" value="匿名関数イベントハンドラ" />
    <br />
    <input id="Button3" type="button" value="HTML の onclick イベントハンドラ" onclick="onClickButton3();" />
    <br />
    <input id="Button4" type="button" value="テキストボックスのリセット" onclick="onClickButton4();" />
    <br />
</body>
</html>

detachEvent のエントリーのソースの流用で、ちゃっちゃと仕上げてみました。

今回は、無名関数イベントハンドラから呼び出す関数に対して arguments.callee を引数で与えて、そこで removeEventListener を試してみたんですが、見事に動いてます。

これで動いちゃうんだなあ、すげえなあ･･････でも、怖えなあ；；；。

やっぱり、addEventListener メソッドで登録したイベントハンドラは解放できますが、HTML の onclick 属性で指定したイベントハンドラは解放できませんでした。

一応 window のロードイベントをひっかけるイベントハンドラは、キャプチャーを true にしてあります。

この方が安全だよね、きっと。

次のエントリーでは、attachEvent とか addEventListener とか気にしなくて済むメソッドの実装をしまーす。

2010-12-10 21:05 nice!(3) コメント(6) トラックバック(3)
共通テーマ：パソコン・インターネット

nice! 3

プラウザのどこに貼れば良いのですか？
by ゆうみ (2010-12-11 13:56)

１）まず、記事のソースプログラムの部分を選択状態にして、[右クリック]-[コピー] を選びます。

２）メモ帳を新しく起動して、[右クリック]-[貼り付け] を選びます。

３）メモ帳で、[ファイル]-[名前を付けて保存] を選び、[ファイルの種類] で [すべてのファイル] を選んで、ファイル名を ”index.html" として保存します。

４）いま保存した "index.html" ファイルを、ブラウザの画面にそのままドラッグアンドドロップします。あるいは、いま保存した "index.html" ファイルをダブルクリックします（←勝手にブラウザが立ち上がるはずです）。

これで実行してみることができます。
by みみちゃん (2010-12-11 20:14)