会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【JavaScript】.addEventListener() とは?

JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

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テキストの選択をした

これらをうまく使うと「○○した時に○○を実行する」といった処理をさせることが可能になります。便利ですね!

まとめ

.addEventListener() の使い方でした。使い方次第でいろいろなことができそうです。

ご参考ください😃

▶サンプルページはこちら

photo-1625668853294-b9e43efb9757
タイトルとURLをコピーしました