LiosK-free Blog

• 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); };
}

• パーマリンク
• コメント (1)
• トラックバック (0)
• 
• 

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

さらに追記。

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

• 2008-01-11
• by LiosK
• id:-