[JavaScript]addEventListenerを手軽に使おう

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[JavaScript]addEventListenerを手軽に使おう

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

トラックバック

コメント

さらに追記。

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:-

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。