addEventListener
JavaScriptから様々なイベント処理を実行できるメソッド(documentオブジェクト)
どの様な時に使用するのか
- ページ内イベントをきっかけとしてjsを動作させたい時
記述方法
- 対象要素.addEventListener( 種類, 関数, false )
- 第一引数 イベントの種類
- 第二引数 任意の関数
- 第三引数 イベント伝搬方法 true/false 通常はfalse
- 対象要素.addEventListener(種類, sampleEvent, false);
function sampleEvent() {
//ここに処理を記述する
}
関数をイベント処理の外側で定義するパターン 関数内処理が複雑な場合、ファイルが分割されている時などに
- 対象要素.addEventListener(種類, function() {
//ここに処理を記述する
}, false);
無名関数を設定する場合 単純な処理しかしない場合は関数を用意するよりも分かりやすくなる
- 対象要素.addEventListener(種類, () => {
//ここに処理を記述する
});
アロー関数を設定する方法 無名関数と特徴的には同じ
イベント処理の作り方
id="btn"としたボタンがあるとして
var btn = document.getElementById('btn');
btn.addEventListener('click', function(), false) {
console.log('クリックされました！');
}
- HTMLのボタン要素を取得
- その要素に対してaddEventListener()を実行
- ボタン要素をクリックすると設定されている関数が実行される
イベント処理の種類（イベントリスナー）
| イベント |
説明 |
| load |
Webページの読み込みが完了した時に発動（画像などのリソースすべて含む） |
| DOMContentLoaded |
Webページが読み込みが完了した時に発動（画像などのリソースは含まない） |
| click |
マウスボタンをクリックした時に発動 |
| mousedown |
マウスボタンを押している時に発動 |
| mouseup |
マウスボタンを離したときに発動 |
| mousemove |
マウスカーソルが移動した時に発動 |
| keydown |
キーボードのキーを押したときに発動 |
| keyup |
キーボードのキーを離したときに発動 |
| keypress |
キーボードのキーを押している時に発動 |
| change |
フォーム部品の状態が変更された時に発動 |
| submit |
フォームのsubmitボタンを押したときに発動 |
| scroll |
画面がスクロールした時に発動 |