【JavaScript】.addEventListener() とは？

2022.03.29

JavaScriptを学んでいると「.addEventListener()」がよく出てきますが、よく分からなかったので・・・メモ。

.addEventListener()

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

ちょっとこれだけでは、よく分からなかったので・・・実際に使ってみます。

.addEventListener() の使い方

下記が基本の使い方です。

要素.addEventListener( 種類, 関数, false )

例えば、このように使えます。IDのBtnSampleがクリックされた時にaddEventListenerが発火して、かつ「functionSample1」の関数が実行されるようになります。

const btnclick = document.getElementById("BtnSample");
btnclick.addEventListener("submit", functionSample1);

このような感じで、送信ボタンをクリックするとアラートが表示されます。

<form id="BtnSample">
<button type="submit">送信</button>
</form>

<script>
const btnclick = document.getElementById("BtnSample");
btnclick.addEventListener("submit", functionSample1);

function functionSample1(){
alert("ボタンが押されました");
}
</script>

表示されました！

主に使われるイベントリスナー

submit以外にも、色々な引数を指定することができます。下記が主に使われるイベントリスナーです。

引数	イベントタイミング
load	ページの読み込みが完了した
click	クリックした
mousedown	マウスのボタンが押下された
mouseup	マウスのボタンを離した
mouseover	カーソルがターゲットに入った
mousemove	カーソルがターゲット内を動いた
mouseout	カーソルがターゲットの外に出た
load	ページの読み込みが完了した
scroll	スクロールした
resize	ブラウザのウィンドウサイズが変更された
submit	フォームを送信した
change	要素の値が変更になってフォーカスが外れた
keyup	キーを離した
keydown	キーを押した
keypress	キーを押した
input	値を入力した
select	テキストの選択をした