[JavaScript]addEventListenerを手軽に使おう / LiosK-free Blog

[JavaScript]addEventListenerを手軽に使おう

2007-12-05
カテゴリ: Client Side
タグ: JavaScript

JavaScriptのイベント処理は面倒くさい。

ブラウザごとにaddEventListenerとattachEventを使い分けたり、eventオブジェクトを引数として受け取るかwindow.eventとして受け取るかを考えたり、thisの扱いについて考えたりしなくてはいけないからだ。

ということで、すごく苦手意識を持っていたのだが、↓の関数を書いておくだけでほとんどのケースには対応できるってことに気づいた。

function observe(target, type, listener) {
    if (target.addEventListener) target.addEventListener(type, listener, false);
    else target.attachEvent('on' + type, function() { listener.call(target, window.event); });
}

addEventListenerの有無で分岐するってとこまでは以前からやっていたんだけど、attachEventにfunction() { listener.call(target, window.event); }を渡すっていうのは今思いついた。

attachEventを使うのもwindow.eventを使うのもthisでtargetを参照できないのもIEだけなんだから狙い撃ちして対策してやればいいんじゃん。何で今まで気づかなかったんだろ。

使用例

observe(document, 'click', function(e) {
    window.alert(e.type + ' on ' + this);
});

実行

追記

三項演算子は嫌う人多いけど、個人的には好き

function observe(target, type, listener) {
    target.addEventListener
    ? target.addEventListener(type, listener, false)
    : target.attachEvent('on' + type, function() { listener.call(target, window.event); });
}

さらに追記

target.attachEvent()を使えないときに、普通にon～イベントに代入する処理を追加した。

function observe(target, type, listener) {
    if (target.addEventListener) target.addEventListener(type, listener, false);
    else if (target.attachEvent) target.attachEvent('on' + type, function() { listener.call(target, window.event); });
    else target['on' + type] = function(e) { listener.call(target, e || window.event); };
}

トラックバック URL

http://liosk.blog103.fc2.com/tb.php/61-897a99ab

LiosK-free Blog