addEventListener

マウスによるクリックやキーボードからの入力といった様々なイベント処理を実行するメソッド。

一般的な書き方は、イベントの種類と実行するための関数を指定する。第1引数にイベントの種類、第2引数に関数、第3引数にイベント伝搬の方式をtrueかfalseで指定する。第3引数は通常はfalseを指定する。

addEventListener 3つの書き方

外部の関数を利用

code:js

対象の要素.addEventListener(種類, 関数, false);

無名関数を設定する

code:js

対象の要素.addEventListener(種類, function() {

// 処理を記述

}, false);

アロー関数を設定する

code:js

対象の要素.addEventListener(種類, () => {

// 処理を記述

});

table:addEventListener イベント一覧

イベント種類 内容

load Webページの読み込みが完了したとき（画像などのリソースすべて含む）

DOMContentLoaded Webページが読み込みが完了したとき（画像などのリソースは含まない）

click マウスボタンをクリックしたとき

mousedown マウスボタンを押しているとき

mouseup マウスボタンを離したとき

mousemove マウスカーソルが移動したとき

keydown キーボードのキーを押したとき

keyup キーボードのキーを離したとき

keypress キーボードのキーを押しているとき

change フォーム部品の状態が変更されたとき　

submmit フォームのsubmitボタンを押したとき

scroll 画面がスクロールしたとき