クロスブラウザでイベントの追加、削除

2012年11月17日 11:57 0 件のコメント

javascriptで基本となる「イベントの追加、削除」処理。

ソースコード 
var g = g || {};
g.event = g.event || {};


/**
* 指定した要素にイベントを追加します。
*
* @public
* @param    {DOMElement}    element     イベントを追加したいDOM要素
* @param    {string}        type        イベント種類
* @param    {function}      handler     コールバック関数
*/
g.event.addEventHandler = function (element, type, handler) {
    var actual;
    
    // ブラウザに応じて使える関数を選択
    if (window.addEventListener) {
        actual = function (element, type, handler) {
            element.addEventListener(type, handler, false);
        };
    } else if (window.attachEvent) {
        actual = function (element, type, handler) {
            element.attachEvent('on' + type, handler);
        };
    } else {
        actual = function (element, type, handler) {
            element['on' + type] = handler;
        };
    }
    
    // 次回呼び出し以降では判定処理が走らないように上書き
    g.event.addEventHandler = actual;
    
    // 初回実行
    actual(element, type, handler);
};


/**
* 指定した要素からイベントを削除します。
*
* @public
* @param    {DOMElement}    element     イベントを削除したいDOM要素
* @param    {string}        type        イベント種類
* @param    {function}      handler     コールバック関数
*/
g.event.removeEventHandler = function (element, type, handler) {
    var actual;
    
    // ブラウザに応じて使える関数を選択
    if (window.removeEventListener) {
        actual = function (element, type, handler) {
            element.removeEventListener(type, handler, false);
        };
    } else if (window.detachEvent) {
        actual = function (element, type, handler) {
            element.detachEvent('on' + type, handler);
        };
    } else {
        actual = function (element, type, handler) {
            element['on' + type] = undefined;
            delete element['on' + type];
        };
    }
    
    // 次回呼び出し校では判定処理が走らないように上書き
    g.event.removeEventListener = actual;
    
    // 初回実行
    actual(element, type, handler);
};
解説

addEventListener、removeEventListener系。
Mozilaとか、IE以外。調べてないのでどのブラウザかは不明。Chrome 23 はこっちみたい。

attachEvent、detachEvent系。
IE。IE9はこっち。こちらの関数には成功、失敗で boolean の戻り値があるらしい。

ポイントはやっぱり、ブラウザ判定を初回に１度しか行わないところ。 イベントを付与したり削除したりするこのコードが呼ばれる回数は多いと思われるので、 判定がなくなることの効果は呼ばれる回数に比例して大きくなるハズ^^

サンプル 
<!DOCTYPE html>
<html>
<head>
    <title>g.event</title>

    <!-- ↓外部ファイルとして読み込んでいるという設定 -->
    <script type="text/javascript" src="./g/event/event.js"></script>

    <!-- ↓実際に使うところ。idが'testbutton'の要素にclickイベントを追加。 -->
    <script type="text/javascript">
var element = window.document.getElementById('testbutton');
g.event.addEventHandler(element, 'click', function (event) {
    window.alert('クリックされたよ');
});
    </script>
</head>
<body>

<input id="testbutton" type="button" value="テスト" />

</body>
</html>

・・・

何度も同じコードを書くのはばからしい… 他人のコードを使うのもいいけど何となく納得できない部分があったり… （jQueryは便利だけど性能がちょっと…） 結局、自分のコードを使いたい。

…という訳で、自分用にメモとして残しておくことにした。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！