Event Listener: イベントリスナー

obj.addEventListener( type, function, useCapture );

obj.attachEvent( type, function );

obj.removeEventListener( type, function, useCapture );

obj.detachEvent( type, function );

/**
 * イベントリスナを追加する関数
 * 基本的には IE でも Firefox でも Safari でも Opera でも同じように使えるようにしてある. 
 * IE ではイベントリスナが受け取る引数のプロパティに currentTarget がないが, 
 * この関数を使うと自動的に追加してくれる. 
 * イベントリスナ内での this による参照は IE とその他で互換性を保っていないので, 
 * イベントリスナ内で現在のイベントターゲットを取得するときは, this を使うのではなく
 * 引数の currentTarget プロパティを使用すること. 
 *
 * 使い方:
 *     addListener( target, type, func );
 * パラメータ等:
 *     @param target イベントリスナを追加する対象. window オブジェクトや element オブジェクト.
 *     @param type イベントリスナが受け取るイベントのタイプ. "click" や "load" など. 
 *     @param func イベントリスナそのもの. 普通は関数. 
 *     @return 戻り値は boolean. addEventListener か attachEvent が実装されていれば true が返り, 
 *             それ以外の場合は false.
 */
var addListener = (function() {
    if ( window.addEventListener ) {
        // DOM Events 実装ブラウザ用
        return function(target, type, func) {
            target.addEventListener(type, func, false);
            return true;
        };
    } else if( window.attachEvent ) {
        // IE 用
        return function(target, type, func) {
            // ----- 局所変数の宣言 -----
            var i = 0;
            var hasBeenAdded = false;
            // ----- 処理 -----
            // target のプロパティに管理用配列を追加
            if( ! target._vividcode_el ) {
                target._vividcode_el = new Array(0);
                // unload 時に解体
                window.attachEvent("onunload", function myself(evt) {
                    // 配列の中身を null に
                    for( i = 0; i < target._vividcode_el.length; i++ ) {
                        target._vividcode_el[i][0] = null;
                        target._vividcode_el[i][1] = null;
                        target._vividcode_el[i] = null;
                    }
                    // 配列への参照をなくす
                    target._vividcode_el = null;
                    // 自分自身を detachEvent
                    window.detachEvent("onunload", myself);
                });
            }
            // 既に登録済みかどうかチェックする
            hasBeenAdded = false;
            for( i = 0; i < target._vividcode_el.length; i++ ) {
                if( target._vividcode_el[i][0] === func ) {
                    hasBeenAdded = true;
                    break;
                }
            }
            // 未登録の場合, 登録する
            if( ! hasBeenAdded ) {
                i = target._vividcode_el.length;
                target._vividcode_el[i] = new Array(func, function(evt) {
                        // evt.currentTarget を指定
                        evt.currentTarget = target;
                        // EventListener 起動
                        func(evt);
                    });
            }
            // addEventListener の方では, 同じ関数を二重に登録しようとすると 2 個目は破棄される. 
            // attachEvent の方だと 2 個目は破棄されない. 同一の動作になるよう, まず detachEvent する. 
            target.detachEvent("on"+type, target._vividcode_el[i][1]);
            target.attachEvent("on"+type, target._vividcode_el[i][1]);
            // unload 時に detachEvent しなければメモリリークを起こすとどこかで読んだので念のため. 
            // 必要以上に detachEvent する場合もあるが実害はないと思う 
            // (さすがに動作時間はそんなに変わらないでしょう) ので気にしないことにする.
            window.attachEvent("onunload", (function () {
                // target._vividcode_el も onunload イベントで解体するので, 
                // 下手すると参照前に解体されている可能性もある. 
                // よって, あらかじめ局所変数に読み込んでおく.
                var func = target._vividcode_el[i][1];
                return function myself(evt) {
                    target.detachEvent("on"+type, func);
                    window.detachEvent("onunload", myself);
                };
            })() );
            return true;
        };
    } else {
        // addEventListener も attachEvent も持ってないブラウザ用
        return function(target, type, func) {
            return false;
        };
    }
})();

/**
 * イベントリスナを削除する関数
 *
 * 使い方:
 *     removeListener( target, type, func );
 * パラメータ等:
 *     @param target イベントリスナを取り除く対象. window オブジェクトや element オブジェクト.
 *     @param type イベントリスナが受け取るイベントのタイプ. "click" や "load" など. 
 *     @param func イベントリスナそのもの. 普通は関数. 
 *     @return 戻り値は boolean. removeEventListener か detachEvent が実装されていれば true が返り, 
 *             それ以外の場合は false.
 */
var removeListener = (function() {
    if( window.removeEventListener ) {
        // DOM Events 実装ブラウザ用
        return function(target, type, func) {
            target.removeEventListener(type, func, false);
            return true;
        };
    } else if( window.detachEvent ) {
        // IE 用
        return function(target, type, func) {
            // ----- 局所変数の宣言 -----
            var i = 0;
            var hasBeenAdded = false;
            // ----- 処理 -----
            // func が登録されているかどうかチェックする
            hasBeenAdded = false;
            for( i = 0; i < target._vividcode_el.length; i++ ) {
                if( target._vividcode_el[i][0] === func ) {
                    hasBeenAdded = true;
                    break;
                }
            }
            // 登録されている場合, detachEvent
            if( hasBeenAdded ) {
                target.detachEvent("on"+type, target._vividcode_el[i][1]);
            }
            return true;
        };
    } else {
        // addEventListener も attachEvent も持ってないブラウザ用
        return function(target, type, func) {
            return false;
        }
    }
})();

// イベント・リスナを追加する関数
    var addListener = (function() {
        if ( window.addEventListener ) { // W3C 準拠ブラウザ用
            return function(elem, type, func) {
                elem.addEventListener(type, func, false);
            };
        } else if ( window.attachEvent ) { // IE 用
            return function(elem, type, func) {
                if( ! func._bridge ) {
                    func._bridge = new Array(0);
                }
                var i = func._bridge.length;
                func._bridge[i] = new Array(3);
                func._bridge[i][0] = elem;
                func._bridge[i][1] = type;
                func._bridge[i][2] = function() {
                    func.apply(elem, arguments);
                };
                elem.attachEvent("on"+type, func._bridge[i][2]);
            };
        } else {
            return function(elem, type, func) {
                return false;
            }
        }
    })();

    // イベント・リスナを削除する関数
    var removeListener = (function() {
        if ( window.removeEventListener ) {
            return function(elem, type, func) {
                elem.removeEventListener(type, func, false);
            };
        } else if ( window.detachEvent ) {
            return function(elem, type, func) {
                var i = 0; var f = null;
                while( i < func._bridge.length ) {
                    if( func._bridge[i][0] == elem && func._bridge[i][1] == type ) {
                        f = func._bridge[i][2];
                        break;
                    }
                    i++;
                }
                elem.detachEvent("on"+type, f);
                func._bridge.splice(i,1);
            };
        } else {
            return function(elem, type, func) {
                return false;
            }
        }
    })();

    // HTMLがブラウザにロードされたときに実行する処理
    var init = function(e) {
        alert("イベント " + e.type + " が発生しました");
        
        /* DOM をいじる時は、ここでいじるようにする */
        
    };

    // window オブジェクトに EventListener として init 関数を追加
    addListener(window, "load", init);