イベントハンドラー/イベントリスナーについてまとめ
イベントドリブンモデル
クリックされた時やページがロードされた時など、イベントが発生した時に処理を実行するプログラミングモデル。
イベントハンドラー/イベントリスナー
イベントに対応して処理内容を定義する関数
イベントの発生で処理を実行させるには以下のことを定義しておく必要がある。
- どの要素でイベントが発生したか
- どのイベントを発生させるか
- どのイベントハンドラー/イベントリスナーに関連付けをするのか
これらの定義をおこなう方法にはonXxxxxを利用する方法とaddEventListener("Xxxxx")を利用する方法があるが、できるかぎりonXxxxxは利用せずaddEventListener("Xxxxx")を利用する。
onXxxxxによるイベントハンドラーの設定には一つ問題があり、同一の要素/イベントに対して複数のイベントハンドラーを関連付けできないので、再代入で上書きされてしまう。
onXxxxxイベント
window.onload = function(){statements};
//windowオブジェクトで発生したloadイベントに対してstatements処理を関連付けさせる
イベントハンドラー（関数）は別に定義することも可
function getTriangle(base,height){
console.log( base * height / 2);
};
window.onload = getTriangle(5,2);
//ページ読み込みと同時にgetTriangle関数を実行
onXxxxxによるイベントハンドラーの登録で複数のイベントハンドラーを登録しようとすると上書きされてしまう。
window.onload = function(){
alert('登録1');
};
window.onload = function(){
alert('登録2');
};
//複数のイベントハンドラーをonXxxxxで登録しようとすると後から登録した方で上書きされてしまう。
//この例だとページ読み込み完了後にアラートされるのは'登録2'の方のみ
addEventListener("Xxxxx")イベント
上のような問題があるため、極力addEventListener("Xxxxx")の方を使う。イベントリスナーは同一要素の同一イベントに対して複数の処理を関連付けできるイベントハンドラーという理解でok。
onXxxxxがイベントを代入しているというイメージに対してaddEventListener("Xxxxx")はイベントを登録しているというイメージ。
window.addEventListener("load",function(){statements},false);
//windowオブジェクトで発生したloadイベントに対してstatements処理を関連付けさせる。
addEventListener("Xxxxx")であれば複数のイベント登録ができる。
window.addEventListener("load",function(){
alert('登録1');
},false);
window.addEventListener("load",function(){
alert('登録2');
},false);
//ページ読み込み完了後に'登録1'と'登録2'が登録した順に両方アラートされる。
また、loadイベントはDOMContentLoadedで書き換えることができる。loadイベントがコンテンツ本体とすべての画像がロードされたところで実行されるのに対し、DOMContentLoadedイベントはコンテンツ本体がロードされたところで実行、つまり画像ロードを待つことなく実行できるので、loadより早いタイミングで実行できる。
よってDOMContentLoadedを利用した方が幸せ。
画像の読み込みが必要な場合はloadを利用。
document.addEventListener("DOMContentLoaded",function(){
alert('Hi');
},false);
//documentオブジェクトの読み込み完了後に'Hi'をアラート
参照
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～