HTML要素.addEventListener() 対応: DOM Level 2（2000）

HTML要素にイベントリスナーを登録し、指定したイベントが発生した際に実行される関数を設定します。

構文

element.addEventListener("イベント名", 関数);

// オプション付き
element.addEventListener("イベント名", 関数, オプション);

引数

引数	概要
イベント名	監視するイベントの名前を文字列で指定します。『click』『input』『submit』『keydown』『scroll』『load』などがあります。『on』は付けません。
関数	イベント発生時に実行されるコールバック関数を指定します。引数としてイベントオブジェクトが渡されます。
オプション	省略可能です。『{ once: true }』を指定すると、イベントが1回だけ実行されて自動的に解除されます。

主なイベント一覧

イベント	概要
click	HTML要素がクリックされた時に発生します。
input	テキストフィールドの値が変更された時に発生します。入力のたびに即座に発生します。
change	フォーム要素の値が確定された時に発生します。テキストフィールドではフォーカスが外れた時に発生します。
submit	フォームが送信された時に発生します。
keydown	キーが押された時に発生します。
keyup	キーが離された時に発生します。
mouseover	マウスがHTML要素の上に乗った時に発生します。
mouseout	マウスがHTML要素から離れた時に発生します。
scroll	スクロールされた時に発生します。
load	ページや画像の読み込みが完了した時に発生します。

サンプルコード

<button id="btn">クリック</button>
<input id="name" type="text" placeholder="名前を入力">
<p id="output"></p>

// クリックイベント
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
	alert("ボタンがクリックされました！");
});

// 入力のたびにリアルタイムに反映されるイベントです。
var input = document.querySelector("#name");
var output = document.querySelector("#output");
input.addEventListener("input", function(e) {
	output.textContent = "こんにちは、" + e.target.value + "さん！";
});

// 1回だけ実行されるイベントです。
btn.addEventListener("click", function() {
	console.log("これは1回しか表示されません");
}, { once: true });