somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】イベントオブジェクトとコールバック関数

イベント発生時の情報をもつイベントオブジェクトについてのメモです。

イベントオブジェクト

イベントオブジェクトとは、イベントが発生したさいの情報を保持しているオブジェクトです。イベントの発生源となった要素や、イベントの発生した座標、時刻など様々な情報が含まれています。

イベントに設定された関数で引数を設定したとき、引数に何も渡さなくても設定した引数はイベントオブジェクトが自動的に格納されます。

var button = ボタンを取得する処理;
button.onclick = function(event) {
  // 処理
};

// または
button.addEventListener('click', function(event) {
  // 処理
}, false);

ただし、IEではイベントオブジェクトを自動的に引数に格納されないようです。代わりにwondw.eventにイベント情報が格納されています。つまり、以下のように実装する必要があります。

var button = ボタンを取得する処理;
button.onclick = function(event) {
  var local_event = event;
  if (!event) {
    local_event = window.event;
  }
  // 処理
};

引数

上記の場合、引数を渡さなかったときには問題ないですが、イベントオブジェクトもそれ以外の引数も必要になったときに対応できません。対応方法は以下のようにします。

var button = ボタンを取得する処理;
button.addEventListener('click', function(event) {
  return function(event, arg1, arg2) {
    // 処理
  };
}, false);

無名関数でラップしてから、実際に処理をする関数を返すようにしています。ラップする順序は、そのときどきでしょう。

名前のある関数、または関数オブジェクトを格納している変数に対して引数を渡し、関数を返してもらう方法もあるためです。