addEventListenerの使い方とイベント一覧

更新日：2024-04-05

＞簡単なaddEventListenerの使い方
【動作サンプル】
＞ addEventListenerの構文・オプション
EventTarget
type（イベント一覧）
listener
【動作サンプル】

◆簡単なaddEventListenerの使い方

まずは、簡単に使い方をHTMLとJavaScriptを使って説明します。
関数の設置の違いは後述します。

動作サンプル【sample】

コード例 - Sample

HTML

<div class="example">
 <input type="button" id="bt1" value="ボタン1">
 <span id="bt1-out"></span> //ボタンをクリックするとここに表示
</div>

JavaScript

document.getElementById('bt1').addEventListener( 'click', testFunc ); //引数1にイベント、引数2に関数名

//呼び出される関数
function testFunc(){
 document.getElementById('bt1-out').innerText = 'clickされました';
}

Sample - Sample

▶クリックすると結果が表示されます

◆addEventListenerの構文・オプション

3種類の書き方があります。

「option」や「useCapture」などの設定はあまり使うことはないと思うので、ここではシンプルな①を取り上げたいと思います。

EventTarget.addEventListener( type, listener )　①

EventTarget.addEventListener( type, listener, options )　②

EventTarget.addEventListener( type, listener, useCapture )　③

EventTarget

指定できる主なターゲットとして、window、document、elementなどがあり、簡単にまとめると以下のようになります。

window	「window」はDOM構造を収めるウィンドウを指します。最上位のイメージです。タブウィンドウであれば、個々のタブそれぞれがwindowという事になります。 JavaScriptなども基本は個々のwindow（タブ）で実行していますが、ブラウザ全体に適用されるもの（ブラウザのリサイズ）などはこの範囲ではありません。
document	「document」とはDOMツリー構造（htmlファイル全体）を指しています。ただの「document」と指定した場合は、htmlファイル全体を対象としていることになります。
elements	「document」から派生して構成される各要素です。「document.documentElement」とすることで、<html>要素を「document.body」とすることで、<body>要素を「document.getElementById(id名)」とすることで、id名が付与されている要素を「document.getElementsByClassName(class名)とすることで、class名が付与されている要素をそれぞれ取得します。 EventTarget以外でも様々な場面で使われます。

コード例

JavaScript

//window
window.addEventListener( type, listener );

//document
document.body.addEventListener( type, listener ); //bodyを指定した場合
document.getElementById('test').addEventListener( type, listener ); //idを指定した場合

//element①
let elem = document.getElementById('test'); //id要素を格納
elem.addEventListener( type, listener );

//element②
let elem2 = document.getElementsByClassName('test'); //複数の要素を一度に指定する場合
for(let i = 0; i < elem2; i++){
 elem2[i].addEventListener( type, listener ); //格納されている要素それぞれにイベントを設定
}

type

クリック、マウス、キーボードなどの様々なイベントを指定します。
マウスやタッチイベントなど、使いそうな物を取り上げたいと思います。

type名	内容	EventTarget
DOMContentLoaded	DOMツリーが読み込まれたときに発行	document
load	DOMツリー、css、画像などが読み込まれたときに発行	window、elements
change	フォーム内容が変更されたときに発行	form
resize	ウインドウサイズが変更されたときに発行	window
scroll	画面がスクロールされたときに発行	window
focus	選択状態のときに発行	window、elements
blur	選択状態が失われたときに発行	window、elements
click	クリックしたときに発行	elements
dblclick	ダブルクリックしたときに発行	elements
keydown	キーが押されたときに発行	documen、elements
keyup	キーが離されてときに発行	documen、elements
mouseup	マウスポインタ―が要素領域内でクリック後、離されたときに発行	elements
mousedown	マウスポインタ―が要素領域内でクリックしたときに発行	elements
mousemove	マウスポインタ―が要素領域内にあるときに発行	elements
mouseenter	マウスポインタ―が要素領域内に入ったとき発行（バブリングなし）	elements
mouseover	マウスポインタ―が要素領域内に入ったとき発行（バブリングあり）	elements
mouseleave	マウスポインタ―が要素領域外に出たとき発行（バブリングなし）	elements
mouseout	マウスポインタ―が要素領域外に出たとき発行（バブリングあり）	elements
pointerup	ポインターが要素の選択から外れたときに発行「mouseup」と同じ意味	documen、elements
pointerdown	ポインターが要素を選択（ヒット）したときに発行「mousedown」と同じ意味	documen、elements
pointermove	ポインターが要素領域内で（座標を）移動したときに発行「mousemove」と同じ意味	documen、elements
pointerenter	ポインターが要素領域内に入ったときに発行（バブリングなし）「mouseenter」と同じ意味	documen、elements
pointerover	ポインターが要素領域内に入ったときに発行（バブリングあり）「mousemove」と同じ意味	documen、elements
pointerleave	ポインターが要素領域外に出たときに発行（バブリングなし）「mouseleave」と同じ意味	documen、elements
pointerout	ポインターが要素領域外に出たときに発行（バブリングあり）「mouseout」と同じ意味	documen、elements
pointercancel	他のアプリに切り替えた場合や、画面端から出た場合などのときに発行	documen、elements
touchstart	画面のタッチ面に触れたときに発行	documen、elements
touchend	画面のタッチ面から（指など）離したときに発行画面端から指が出た場合などにも発行	documen、elements
touchmove	タッチ面で移動したときに発行ブラウザにより動作が異なる場合があります	documen、elements
touchcancel	操作中にアラートがポップアップやタッチ指定領域外に出たときなどに発行ブラウザにより動作が異なる場合があります	documen、elements
dragstart	ドラックを開始したときに発行	documen、elements
dragend	ドラックを離したとき（マウスボタンを離す）に発行	documen、elements
dragover	ドロップ領域に入っている間、数ミリ秒毎に発行マウスが動いていない時は50ミリ秒、マウスがゆっくり動いているときは5ミリ秒、マウスが早く動いているときは1ミリ秒	documen、elements
dragenter	ドロップ領域に入ったときに発行	documen、elements
dragleave	ドロップ領域（ドラックした要素）から出たときに発行	documen、elements
drop	ドロップ先として有効な領域でドロップ（マウスボタンを離す）されたときに発行	documen、elements

listener

イベントが発行（発生）したときの処理、関数などを指定します。
無名関数やアロー関数を使って指定することもできます。

ディスプレイ上のマウス位置の取得

コード例

JavaScript

//①関数名を使う場合
document.getElementById('bt1').addEventListener( 'click', testFunc ); //()は付けない

//②無名関数を使う場合
document.getElementById('bt1').addEventListener( 'click', function(){
 testFunc();
});

//③アロー関数を使う場合
document.getElementById('bt1').addEventListener( 'click', ()=>{
 testFunc();
});

関数に引数を渡すこともできます。
引数を渡す場合は、②無名関数、③アロー関数を使う必要があります。

下は無名関数の例ですが、アロー関数も同じです。

動作サンプル【sample】

コード例 - Sample

HTML

<div class="example">
 <input type="button" id="bt2" value="ボタン2">
 <span id="bt2-out"></span> //ボタンをクリックするとここに表示
</div>

JavaScript

//無名関数の場合
document.getElementById('bt2').addEventListener( 'click', function( hikisu ){ //「hikisu」にEventTargetからのデータが格納されます
 testFunc2( hikisu.target.value ); //格納されたデータの中から、valueの情報を関数に渡します
});

//呼び出される関数
function testFunc2( e ){ //渡されたデータが「e」に入っています
 document.getElementById('bt2-out').innerText = e + 'がclickされました'; //渡されたデータ「e」と文字列を結合して出力します
}

Sample - Sample

▶クリックするとinputボタンのvalue値が渡されて、表示されます

また、イベントハンドラである「addEventListener」は「this」という記述を利用して、EventTargetからデータを取得することも出来ます。
「this」記述はアロー関数では使えないので注意が必要です。

コード例

JavaScript

document.getElementById('bt2').addEventListener( 'click', function(){
 testFunc2( this.value ); //thisに格納されたデータの中から、valueの情報を関数に渡します
});

//呼び出される関数
function testFunc2( e ){
 document.getElementById('bt2-out').innerText = e + 'がclickされました';
}