指定方法は簡単で、
HTMLファイルに「Javascript」を記述しなくても、
イベントを検知できる。

「addEventListener()」メソッドでイベントを監視するのは、
「HTML要素（Element）」「Webページ（Document）」「ブラウザ（Window）」などに設置することが多い。

発生するイベントの種類は、
たくさんあるので、下記の「イベントの種類」を参照してみてください。良く利用されるイベントは、
・click - クリックした時
・mouseenter - マウスが上に来た時
・mouseleave - マウスが上から離れた時
・load - ページや画像が読み込まれた時
・scroll - スクロールされた時
・submit - 送信ボタンが押された時
などが良く使われる。

「addEventListener()」メソッドの書式

構文

target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);

Gecko/Mozilla only

target.addEventListener(type, listener [, useCapture, wantsUntrusted ]);

サンプルコード

const Get_ID = document.querySelector('#ID名');
const Get_ID = document.getElementById("ID名");
const capture = {
capture : true
};
Get_ID.addEventListener("click", 関数名);
Get_ID.addEventListener("click", 関数名, capture);
Get_ID.addEventListener("click", 関数名, false);

「addEventListener」を設置するときに、実行する関数を組み込む書式

document.querySelector('#ID名').addEventListener('click', function() {
クリックされた時に実行したいコードを記述
});

返値

undefined

引数

引数の種類	説明
type	対象とするイベントの種類を表す文字列
listener	指定された型のイベントが発生するときに通知 (Event インターフェースを実装しているオブジェクト) を受け取るオブジェクト。これは、 EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の関数でなければなりません。コールバックについて詳しくは、イベントリスナーのコールバックを参照してください。
options Optional	対象のイベントリスナーの特性を指定するオプション。 capture Boolean値で、「true」を指定した場合、この型のイベントがDOMツリーで下に位置する「EventTarget」に配信される前に、登録された「listener」に配信されることを示す。 once Boolean 値で、「true」を指定した場合、「listener」の呼び出しを一回のみのとする。「listener」は一度実行された時に自動的に削除される。 passive Boolean値で、「true」を指定した場合、「listener」で指定された関数が、「preventDefault()」を呼び出さない。呼び出されたリスナーが「preventDefault()」を呼び出すと、自動的にコンソールに警告を出力する。 mozSystemGroup Boolean値で、「true」を指定した場合、リスナーをシステムグループに追加する。コードが「XBL」「chrome」で実行されている場合のみ利用可能。
useCapture Optional	Boolean値で、「true」を指定した場合、この型のイベントがDOMツリーで下に位置する「EventTarget」に配信される前に、登録された「listener」に配信されることを示す。上方向にバブリングしているイベントは、キャプチャーを使用するように指定されたリスナーを起動しない。デフォルトは、「false」。
wantsUntrusted	Boolean値で、「true」の場合、ウェブコンテンツによって発火された合成イベント (カスタムイベント) を受け取る。ブラウザーのクロームのデフォルトは「false」。一般のウェブページのデフォルトは「true」。この引数は Gecko でのみ利用可能。

イベントの種類

イベント名	説明
error	リソースをロードできなかったとき。
abort	リソースの読み込みが中止されたとき。
load	リソースとそれに依存するリソースのロードが完了したとき。
beforeunload	ウィンドウ、文書、およびそのリソースがアンロードされる前。
unload	文書または依存するリソースがアンロードされたとき。


ネットワークイベント
online	ブラウザーがネットワークにアクセスしたとき。
offline	ブラウザーがネットワークにアクセスできなかったとき。


フォーカスイベント
focus	要素がフォーカスされているとき (バブリングなし)。
blur	要素がフォーカスを失ったとき (バブリングなし)。
focusin	要素がフォーカスされようとしているとき (バブリングあり)。
focusout	要素がフォーカスを失いかけているとき (バブリングあり)。


WebSocket イベント
open	WebSocket 接続が確立されたとき。
message	WebSocket 経由でメッセージを受信したとき。
error	WebSocket の接続が障害（例えば、データの一部を送信できなかったなど）により終了したとき。
close	WebSocket 接続が閉じられたとき。


セッション履歴イベント
pagehide	セッション履歴のエントリが横断されているとき。
pageshow	セッション履歴のエントリが移動されているとき。
popstate	セッション履歴エントリが（場合によっては）ナビゲートされているとき。


CSS アニメーションイベント
animationstart	CSS アニメーションが開始したとき。
animationend	CSS アニメーションが終了したとき。
animationiteration	CSS アニメーションが繰り返されたとき。


CSS トランジションイベント
transitionstart	CSS トランジションが実際に始まったとき。（発火までに遅延がある）
transitioncancel	CSS トランジションがキャンセルされたとき。
transitionend	CSS トランジションが終了したとき。
transitionrun	CSS トランジションが実行し始めたとき。（遅延が始まる前に発火する）


フォームイベント
reset	リセットボタンが押されたとき。
submit	サブミットボタンが押されたとき。


プリントイベント
beforeprint	プリントダイアログを開いたとき。
afterprint	プリントダイアログを閉じたとき。


文章構成イベント
compositionstart	文章作成の準備がされたとき（キーボード入力のキーダウンに似ていますが、音声認識などの他の入力でも動作します）。
compositionupdate	作成中の文章に文字が追加されたとき。
compositionend	文章作成が終了したり、キャンセルされたとき。


ビューイベント
fullscreenchange	要素がフルスクリーンモードに切り替えられたとき。
fullscreenerror	技術的な理由か許可が下りなかったため、フルスクリーンモードに切り替えることができないとき。
resize	ドキュメントビューのサイズが変更されたとき。
scroll	画面がスクロールされたとき。


クリップボードイベント
cut	選択範囲が切り取られてクリップボードにコピーされたとき。
copy	選択範囲がクリップボードにコピーされたとき。
paste	クリップボードからアイテムが貼り付けられたとき。


キーボードイベント
keydown	任意のキーが押されたとき。
keypress	Shift、Fn、CapsLock を除く任意のキーが押された状態にあるとき (連続して発生する)。
keyup	任意のキーが (押された状態から) 解放されるとき。


マウスイベント
auxclick	ポインティングデバイスのボタン（主ボタン以外のボタン）が、要素上で押し離されたとき。
click	ポインティングデバイスのボタン（任意のボタン。まもなく主ボタンのみになります）が、要素上で押し離されたとき。
contextmenu	マウスの右ボタンがクリックされたとき（コンテキストメニューが表示される前）。
dblclick	ポインティングデバイスのボタンが、要素上でダブルクリックされたとき。
mousedown	ポインティングデバイスのボタンが、要素上で押されているとき。
mouseenter	ポインティングデバイスが、リスナーが接続されている要素に移動したとき。
mouseleave	ポインティングデバイスが、リスナーが接続されている要素から外れたとき。
mousemove	ポインティングデバイスが、要素上を移動しているとき（マウスの移動に合わせて連続発火します）。
mouseover	ポインティングデバイスが、リスナーが接続されている要素、またはその子要素に移動したとき。
mouseout	ポインティングデバイスが、リスナーが接続されている要素、またはその子要素から外れたとき。
mouseup	ポインティングデバイスのボタンが、要素上で離されたとき。
pointerlockchange	ポインターがロックされたか解除されたとき。
pointerlockerror	ポインターのロックが、技術的な理由か動作を拒否されたためにできないとき。
select	テキストが選択されているとき。
wheel	ポインティングデバイスのホイールボタンが、任意の方向に回転しているとき。


ドラッグ & ドロップイベント
drag	要素もしくは選択文字列がドラッグされている間。（350 ミリ秒ごとに断続的に発火します）
dragend	ドラッグ操作が終わったとき。（マウスボタンが放された時、または ESC キーが押されたとき）
dragenter	要素もしくは選択文字列がドラッグされて、有効なドロップ対象に入ったとき。
dragstart	ユーザーが、要素もしくは選択文字列をドラッグし始めたとき。
dragleave	要素もしくは選択文字列がドラッグされて、有効なドロップ対象からはずれたとき。
dragover	要素もしくは選択文字列が、有効なドロップ対象の上をドラッグされている間。（350 ミリ秒ごとに断続的に発火し
ます）
drop	要素が有効なドロップ対象にドロップされたとき。（訳注：原文に「選択文字列」の記述がない）


メディアイベント
audioprocess	The input buffer of a ScriptProcessorNode is ready to be processed.
canplay	The browser can play the media, but estimates that not enough data has been loaded to
play the media up to its end without having to stop for further buffering of content.
canplaythrough	The browser estimates it can play the media up to its end without stopping for content buffering.
complete	The rendering of an OfflineAudioContext is terminated.
durationchange	The duration attribute has been updated.
emptied	The media has become empty; 例えば、this event is sent if the media has already been
loaded (or partially loaded), and the load() method is called to reload it.
ended	Playback has stopped because the end of the media was reached.
loadeddata	The first frame of the media has finished loading.
loadedmetadata	The metadata has been loaded.
pause	Playback has been paused.
play	Playback has begun.
playing	Playback is ready to start after having been paused or delayed due to lack of data.
ratechange	The playback rate has changed.
seeked	A seek operation completed.
seeking	A seek operation began.
stalled	The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend	Media data loading has been suspended.
timeupdate	The time indicated by the currentTime attribute has been updated.
volumechange	The volume has changed.
waiting	Playback has stopped because of a temporary lack of data.


Progress イベント
abort	Progression has been terminated (not due to an error).
error	Progression has failed.
load	Progression has been successful.
loadend	Progress has stopped (after "error", "abort" or "load" have been dispatched).
loadstart	Progress has begun.
progress	In progress.
timeout	Progression is terminated due to preset time expiring.


ストレージイベント
change (see Non-standard events)
storage


更新イベント
checking
downloading
error
noupdate
obsolete
updateready


値変更イベント
broadcast
CheckboxStateChange
hashchange
input
RadioStateChange
readystatechange
ValueChange


未分類のイベント
invalid
localized
message
open
show

Back

【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法

「addEventListener()」 メソッドの書式

構文

Gecko/Mozilla only

サンプルコード

「addEventListener」を設置するときに、実行する関数を組み込む書式

返値

引数

capture

once

passive

mozSystemGroup

イベントの種類

「addEventListener()」メソッドの書式