DOMおれおれAdvent Calendar 2015 – 21日目

2015-12-21

イベント監視のコールバックでもらえるeventオブジェクト、色々使えます。

target でイベント発生要素

あと currentTarget で監視対象要素、 relatedTarget で関連要素。

過去記事をどうぞ。

type でイベントの種類

例えば click イベントを監視していたら event.type は "click" になります。複数のイベント監視を同じコールバック関数で行う場合に利用できます。

var listener = function(event) {
  console.log(event.type);
};
el.addEventListener('focus', listener);
el.addEventListener('click', listener);

マウス操作とタッチ操作をある程度同一視しつつ一部違う処理、なんてときに便利かもしれません。あとは諸々のイベントを監視してログ取ってるときとか。

timeStamp

イベント発生日時の数字です。

だいたい Date.now() と同じくらいになるかと思います。 new Date(event.timeStamp) してやるとDateオブジェクトになります。

Firefoxでバグってる

なんか変な数字が返ってきます。

『11年くらいバグってる』そうです。まじかよ。

内容が変わるっぽい

Dateと同じミリ秒単位の数字が設定されてたんですが、最近この値をページ読み込み時を起点としたマイクロ秒単位の値になりそうな流れです。

defaultPrevented でキャンセル済みか確認

preventDefault() されると true になります。

el.addEventListener('click', function(event) {
  console.log(event.defaultPrevented);  // => false
  event.preventDefault();
  console.log(event.defaultPrevented);  // => true
});

eventPhase でイベント発火の段階を知る

状態 定数
未発火 Event.NONE
キャプチャ中 Event.CAPTURING_PHASE
対象要素 Event.AT_TARGET
浮上中 Event.BUBBLING_PHASE

「キャプチャ中」てのはあれです、 addEventListener() の第三引数で true を指定した時のあれです。

あとIEは Event.NONE を持ってないみたい。

その他

だいたいよくわかってない。

  • bubbles … 浮上し得るかどうか。コールバック関数に与えられるものは全部 true ？　新規作成したオブジェクトだと false
  • cancelable … preventDefault() でキャンセルできるか。したか、じゃない。
  • isTrusted … 利用者操作からのイベントであるか。JavaScriptが作成したEventオブジェクト等だと false

参考