【JavaScript】addEventListenerの使い方

6828 ワード
HTML 初心者 プログラミング勉強日記 JavaScript HTML テキストリンク

プログラミング勉強日記

2021年1月11日
今日はaddEventListenerの使い方を簡単にまとめる。

addEventListenerとは

　マウスによるクリックやキーボードからの入力といった様々なイベント処理を実行するメソッド。
　一般的な書き方は、イベントの種類と実行するための関数を指定する。第1引数にイベントの種類、第2引数に関数、第3引数にイベント伝搬の方式をtrueかfalseで指定する。第3引数は通常はfalseを指定する。

基本的な書き方
対象の要素.addEventListener(種類, 関数, false);

外部の関数を設定する

　関数をイベント処理の外側で定義する。関数内の処理が複雑な場合やファイルが複数に分かれている場合に使われる。

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

function sample() {
  // 処理を記述
}

無名関数を設定する

　一般的に使われる方法で、第2引数にそのまま関数を記述する。単純な処理を記述する場合によく使われる。

対象の要素.addEventListener(種類, function() {
  // 処理を記述
}, false);

アロー関数を設定

　無名関数をES2015の書き方にしたパターンである。

対象の要素.addEventListener(種類, () => {
  // 処理を記述
});

イベントの種類

イベント種類 内容
load Webページの読み込みが完了したとき（画像などのリソースすべて含む）
DOMContentLoaded Webページが読み込みが完了したとき（画像などのリソースは含まない）
click マウスボタンをクリックしたとき
mousedown マウスボタンを押しているとき
mouseup マウスボタンを離したとき
mousemove マウスカーソルが移動したとき
keydown キーボードのキーを押したとき
keyup キーボードのキーを離したとき
keypress キーボードのキーを押しているとき
change フォーム部品の状態が変更されたとき　
submmit フォームのsubmitボタンを押したとき
scroll 画面がスクロールしたとき

サンプルコード

　クリックイベント処理の簡単なサンプルコード

<!DOCTYPE html>
<html>
  <body>

    <h1 id = "idName">クリック前</h1>
    <button id = "btn">クリック</button>

    <script>
      var btn = document.getElementById('btn');

      btn.addEventListener('click', function() {
        var mydiv = document.getElementById("idName");

        mydiv.innerHTML = "クリック後";

      }, false);
    </script>

  </body>
</html>

実行結果

参考文献

【JavaScript】addEventListenerで関数に引数をわたす
【JavaScript入門】addEventListener()によるイベント処理の使い方！