マウスでのクリックやページ（HTMLドキュメント）の読み込みなど、JavaScriptで使われる主なイベントの書き方についてサンプルを記す。
addEventListener は、特定のイベントが発生したときに呼び出す関数を指定できるメソッド。 従来からある window.onload などと異なり、重複があっても全て実行可能。
addEventListener(type, listener[, options]);
<script>
function ftest(){
//ページロード後の処理
}
window.addEventListener('load', ftest, false);
</script>
window.addEventListener('DOMContentLoaded', function(){
//DOM読み込み完了後の処理
}, false);
document.getElementById('example').addEventListener('click', function(){
//クリックしたときの処理
}, false);
| イベント名 | 実行のタイミング |
|---|---|
| load | リソース及び、それに関連するリソースが読み込み完了した後。 |
| DOMContentLoaded | 画像などの関連リソースの読み込みを待たず、HTMLドキュメントの読み込みと解析が終わった後。 |
| click | マウスで対象要素をクリックしたとき（ボタンを押して離した後）。 |
| dblclick | マウスで対象要素をダブルクリックしたとき。 |
| mousedown | マウスで対象要素をクリックしたとき（ボタンを押した後）。 |
| mouseover | マウスで対象要素にカーソルを合わせたとき。 |
| keydown | キーボードの任意のキーが押されたとき。 |
| keyup | キーボードの任意のキーを離したとき。 |
| change | 対象要素（プルダウンメニューなど）で内容が変更されたとき。 |
2016年頃から主要ブラウザであれば使用可能となっている。 Internet Explorer はバージョン9以上で使用可能。 シェアやセキュリティの観点からバージョン8以下は切り捨てて問題ないだろう。
なお、古い Internet Explorer で使用可能なイベントリスナーとしては attachEvent がある。 バージョン6～10で使用可能。 「onload」のように、従来通り文字列の先頭に「on」を記す。
function hoge(){
//関数実行
}
window.attachEvent('onload', hoge);
ただしこれも注意が必要で、Internet Explorer 11では使用不可となっている。
昔は、window や document などの上位オブジェクトに続けてイベントを書くことが多かった。
以下に例を記す。
<script>
function sampleA(){
//A
}
function sampleB(){
//B
}
window.onload = sampleA;
document.onclick = sampleB;
</script>
また、無名関数を使い、以下のように書くこともできる。
window.onload = function(){
//～処理～
};
document.getElementById('example').onclick = function(){
//～処理～
};
昔からある書き方なので古いブラウザでも動作する。 ただし、重複がある場合、最後に書いたものだけが実行されるという欠点がある。
また、さらに昔に遡ると、HTMLタグの中にイベントハンドラを書くこともあった。 例えば、ページ（<body>要素）が読み込まれたときにJavaScriptを実行したいときは、以下のように書く。
<body onload="example()"> ～ </body>
直感的で分かりやすいが、関数名を変更したときなどにHTMLコードも書き直す必要があり、保守性が低い。