Javascriptの変数にイベントを格納する(トグルボタンの作成方法)

Javascriptにおいて、変数というものはけっこうおおらかに出来ている印象。

変数の種類(数値・文字列・配列などなど)を特に指定すること無く、ざくっと

var 変数 = ...

と言う形で代入できる。

今回はそんなJavascriptのおおらかな変数に、イベントをまるごと代入してしまうことができるんだ!という発見の覚え書き。

HTMLのある要素に、onClickイベントを付加しているとする。

<div onClick="test(this)">「あああ」とアラートを表示する</div>

このonClickイベントの内容を

function test(button) {
window.alert("あああ");
var button_default_text = button.innerHTML;
var button_default_action = button.onclick;
button.innerHTML = button.innerHTML.replace("あああ","いいい");
button.onclick =
    function(){
        window.alert("いいい");
        button.innerHTML=button_default_text;
       button.onclick=button_default_action;
    };
}

とすると、「あああ」とアラートが表示されるボタンと、「いいい」とアラートが表示されるボタンが交互に現れる。

サンプルはこちら

コードはそれぞれこんな役割です。

//onClickで起こるイベント
function test(button) {
window.alert("あああ");    //「あああ」とアラートを表示する。
var button_default_text = button.innerHTML;    //ボタンの元のテキストを変数に格納する。
var button_default_action = button.onclick; //ボタンの元のonClickイベントを変数に格納する。
button.innerHTML = button.innerHTML.replace("あああ","いいい");    //ボタンの文字列の置換
button.onclick =    //ボタンのonClickイベントを書き換え
    function(){
        window.alert("いいい");   //「いいい」とアラートを表示する。
        button.innerHTML=button_default_text;    //ボタンのテキストをbutton_default_textにする。
        button.onclick=button_default_action;  //ボタンのonClickイベントをbutton_default_actionにする。
    };
}

今回のポイントは赤字で示した「onClickイベントを変数に格納する。」

ということと、

その変数を元に「onClickイベントを元に戻す。」

ということです。

これは便利だな~

広告

t87r について

趣味:トランペット・釣り・コーディング JavascriptとGAE/Pythonを勉強中。
カテゴリー: Web Design タグ: , パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中