WEBブラウザのイベントの処理について
【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets
--イベントリスナーを理解しょう--
【イベントリスナーと、イベントハンドラ】
DOMレベル2から、一つのイベントに対して複数のコールバック関数を登録する事が出来るイベントリスナーという機能が用意された。これにより、イベントハンドラのように、コールバック関数を2つ書くと、先に登録した関数が上書きされる事が無くなる。
【リスナーの登録】
イベントに対してリスナー関数を登録するには、エレメントオブジェクトのaddEventListener(イベント名、リスナー関数、useCapture)メソッドを使う
・例文
・実行結果
【リスナーの取り消し】
登録済みのリスナー関数をエレメントオブジェクトから取り除くには、removeEventListener()メソッドを使う。
例文
myBtn.removeEventListener("click", clickListener1, false);
【イベントフローを理解しよう】
イベントフロー→発生したイベントは、DOMツリーのトップから下位の階層へ進み(キャプチャリングファーズ)、イベントが発生したオブジェクトに到達すると、再び上位の階層に進む事(パブリックファーズ)
・パブリックファーズの動作確認(イベント発生箇所→上へ)
実行結果
・キャプチャリングファーズの動作確認(イベント発生箇所→下へ)
実行結果
・イベントの伝搬を停止するには
stopPropagation()メソッドを使う
実行結果