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() の使い方でした。使い方次第でいろいろなことができそうです。
ご参考ください😃
▶サンプルページはこちら
