イベントリスナー - JavaScript

更新:

JavaScriptで関数など何かしら処理を実行する際、その起点となるのがイベントリスナー(ハンドラ)。 即時関数など一部の方法を除き、これが無いと何も始まらない。 ほぼ必須と言っても過言ではない。

addEventListener()

addEventListenerは、特定のイベントが発生したときに呼び出す関数を指定できるメソッド。 現在もっともよく使われていると思われる。 特徴としては、従来からあるwindow.onloadなどと異なり、同名のイベントを記述したaddEventListenerが複数あっても、それぞれ実行される。

構文

addEventListener(type, listener[, options]);
type
load、clickなどイベントの種類(後述)を指定する。
listener
イベント発生時に実行されるオブジェクト。通常、関数が指定される。
options
どのように実行するか、特性を指定できる。
記述例(基本)
function ftest(){
   //処理内容
}

window.addEventListener('load', ftest, false);

記述例(無名関数)
window.addEventListener('DOMContentLoaded', function(){
   //処理内容
}, false);

記述例(要素指定)
document.getElementById('example').addEventListener('click', function(){
   //処理内容
}, false);

よく使うイベントタイプ

loadはリソースの読み込みに時間がかかることがあるため、少しでも早くスクリプトを実行したい場合は、代わりにDOMContentLoadedを使用するのが望ましい。

イベント名 実行のタイミング
load リソース及び、それに関連するリソースが読み込み完了した後。
DOMContentLoaded HTMLドキュメントの読み込みと解析が終わった後。画像など関連リソースの読み込みを待たない。
click マウスで対象要素をクリック時(ボタンを押して離した後)。
dblclick マウスで対象要素をダブルクリック時。
mousedown マウスで対象要素をクリック時(ボタンを押した後)。
mouseover マウスで対象要素にカーソルを合わせたとき。
keydown キーボードの任意のキーが押されたとき。
keyup キーボードの任意のキーを離したとき。
change 対象要素(プルダウンメニューなど)で内容が変更されたとき。

対応ブラウザ

addEventListenerは、2016年以降、主要ブラウザであれば使用可能。 ただし、Internet Explorerはバージョン9以上で対応。 2020年現在、シェアやセキュリティの観点から、Internet Explorer 8以下は切り捨てて問題ないだろう。 もし対応したい場合は、attachEventなどを使用する。

attachEvent()

attachEventはInternet Explorer 6~10で使用可能で、11からサポート対象外。 イベントの種類はaddEventListenerと異なり、従来のように頭に「on」を記述する。

記述例
function ftest(){
   //処理内容
}

window.attachEvent('onload', ftest);

昔からある記述方法

addEventListenerが普及する前は window.onload のような記述方法がよく使われていた。

記述例
function ftesta(){
   //処理内容
}

function ftestb(){
   //処理内容
}

window.onload = ftesta;
document.onclick = ftestb;

windowやdocumentは上位オブジェクト。 windowについては省略も可能。

また、無名関数を使い、以下のような書き方もできる。

記述例(無名関数)
window.onload = function(){
   //処理内容
};

document.getElementById('example').onclick = function(){
   //処理内容
};

この記法の利点としては、昔からある仕様なので古いブラウザでも使用可能なこと。 ただし、同じオブジェクトや要素のイベントが重複した場合、上書きされ、最後に書いたものだけ実行されるという欠点がある。

タグ(要素)内への記述

さらに昔に遡ると、タグの中にイベントハンドラを記述する方法もよく使われた。 例えば、ページ(<body>要素)が読み込まれたときにJavaScriptの関数を実行したいときは、<body onLoad="関数名">のように記述する。

記述例
<span onclick="ftestb()">クリック</span>

直感的で分かりやすいが、イベント名や関数名を変更した場合、HTML側も変更する必要があるので少し厄介。

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