EventTarget:addEventListener()

（Web API ＞ EventTarget）
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

対象要素.addEventListener( 種類, 関数, false )

JavaScriptからさまざまなイベント処理を実行することができるメソッド。
第1引数にイベントの種類を指定することで、このイベントがどのようなケースに対応するのかを特定する。
第2引数に関数を指定することで、任意のイベントが発生した時に関数内に書かれた処理を実行する。
第3引数は、イベント伝搬の方式を「true / false」で指定するが、通常はfalseを指定しておく。

以下の例は、ボタンをクリックしたら、イベント処理が発動して関数が実行されるようになる。

<button id="btn">表示</button>
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  console.log('クリックされました！');
}, false);

主なイベントリスナー一覧（第1引数に設定）

  • load：Webページの読み込みが完了した時に発動（画像などのリソースすべて含む）
  • DOMContentLoaded：Webページが読み込みが完了した時に発動（画像などのリソースは含まない）
  • click：マウスボタンをクリックした時に発動
  • mousedown：マウスボタンを押している時に発動
  • mouseup：マウスボタンを離したときに発動
  • mousemove：マウスカーソルが移動した時に発動
  • keydown：キーボードのキーを押したときに発動
  • keyup：キーボードのキーを離したときに発動
  • keypress：キーボードのキーを押している時に発動
  • change：フォーム部品の状態が変更された時に発動
  • submmit：フォームのsubmitボタンを押したときに発動
  • scroll：画面がスクロールした時に発動

イベントリスナーの第3引数のフラグについて

useCapture設定。
例えばclickイベントを親と子、両方に設定している場合、親にtrueを設定した際に子供（内側）をclickすると親が先に発火（キャプチャフェーズ）し、続いて子供が発火する。useCaptureによって発生するイベントの順番が変わる。デフォルト値はfalse。

イベントフェーズ

イベントが発生すると下記の流れでイベント伝播が発生する。
[キャプチャフェーズ]：DOMツリーをたどってルート要素から発生要素を探しに行く
[ターゲットフェーズ]：発生要素を検出する
[バグリングフェーズ]：今度はルート要素まで遡る

inserted by FC2 system