Baccho Log

No Image

Sponsored Link

ネイティヴのJSでイベントを設定する方法

  • 投稿日:
Tags:
JavaScript
Categories:
プログラミング

addEventListener

addEventListener(EventType, func, userCapture);

  1. Eventを指定します
  2. Event発火後の処理を設定します。
  3. イベントフェーズを真偽値で指定します。
    ture: Captureフェーズ
    false: Targetフェーズ, Bubblingフェーズ

フェーズについては、ルートオブジェクト(HTMLの場合はDocumentオブジェクト)からターゲットオブジェクト(指定要素)に向かって階層に沿ってに読み込まれていく。

  • ルートオブジェクト
    ターゲットオブジェクト に向かう段階が Captureフェーズ
    ターゲットオブジェクト に着いたところがTargetフェーズ
  • ターゲットオブジェクト
    ルートオブジェクト に向かう段階が Bubblingフェーズ

となります。

フェーズの分かりやすい説明は下記のページ

addEventListener()の第3引数の意味とかをちゃんと理解する為のメモ – 今日もスミマセン。
addEventListenerの第3引数の意味 | JavaScript プログラミング解説
Qiita | DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017

まぁ第三引数については、基本はFalseでいいと思います。
細かい挙動を意識しなくてはならない場合は、状況に応じて使ってみましょう。

DOMの読み込み後

document.addEventListener('DOMContentLoaded', function(e) {
    alert("Complete!!");
}, false);

ページ全体の読み込み後

window.addEventListener('load', function(e) {
    alert("Complete!!");
}, false);
« Ajaxの使い方jQuery アニメーションのあれこれ »

Sponsored Link

コメントする

記事の感想や修正依頼等ありましたら、コメントをお願いいたします