Javascriptの超入門編21-WEBブラウザのイベント

WEBブラウザのイベントの処理について

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

--イベントリスナーを理解しょう--

【イベントリスナーと、イベントハンドラ】
DOMレベル2から、一つのイベントに対して複数のコールバック関数を登録する事が出来るイベントリスナーという機能が用意された。これにより、イベントハンドラのように、コールバック関数を2つ書くと、先に登録した関数が上書きされる事が無くなる。


【リスナーの登録】
イベントに対してリスナー関数を登録するには、エレメントオブジェクトのaddEventListener(イベント名、リスナー関数、useCapture)メソッドを使う

・例文

・実行結果


【リスナーの取り消し】
登録済みのリスナー関数をエレメントオブジェクトから取り除くには、removeEventListener()メソッドを使う。

例文
myBtn.removeEventListener("click", clickListener1, false);

【イベントフローを理解しよう】
イベントフロー→発生したイベントは、DOMツリーのトップから下位の階層へ進み（キャプチャリングファーズ）、イベントが発生したオブジェクトに到達すると、再び上位の階層に進む事（パブリックファーズ）


・パブリックファーズの動作確認（イベント発生箇所→上へ）

実行結果


・キャプチャリングファーズの動作確認（イベント発生箇所→下へ）

実行結果


・イベントの伝搬を停止するには
stopPropagation()メソッドを使う

実行結果