イベントの書き方 - JavaScript

更新:

マウスでのクリックやページ(HTMLドキュメント)の読み込みなど、JavaScriptで使われる主なイベントの書き方についてサンプルを記す。

addEventListener()

addEventListener は、特定のイベントが発生したときに呼び出す関数を指定できるメソッド。 従来からある window.onload などと異なり、重複があっても全て実行可能。

構文

addEventListener(type, listener[, options]);
type
イベントタイプを示す文字列。load、click、mouseoverなどを指定する。
listener
通知を受け取るオブジェクト。通常、関数を指定する。
options
オプションオブジェクト。実行の仕方・特性などを指定する。

書き方

基本

<script>
function ftest(){
   //ページロード後の処理
}

window.addEventListener('load', ftest, false);
</script>

無名関数の場合

window.addEventListener('DOMContentLoaded', function(){
   //DOM読み込み完了後の処理
}, false);

HTML要素を指定する場合

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コードも書き直す必要があり、保守性が低い。

このエントリーをはてなブックマークに追加