💡

JavaScriptのイベント、ハンドラ、タイプとは?

2022/04/25に公開約4,000字

Vuexやってて出てきたJavaScriptの専門用語忘れてたので勉強し直した!

参考になるドキュメント

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events
https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures
https://developer.mozilla.org/ja/docs/Web/API/Event/type

Webサイトには、さまざまな「イベント」がある。クリック・タップ・スクロール・画像読み込み完了・JSON読み込み完了など。
button要素でクリック・タップなどさまざまなイベントが発生する。このようなイベントを発生させるオブジェクトのことを「イベントターゲット」といい。イベントターゲットが発生した時の処理を「イベントリスナー」と呼ぶ。

以下はボタンをクリックした時に発生する処理

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>イベント</title>
</head>
<body>
  <button class="button">クリック</button>
  <script>
    const button = document.querySelector('.button');
    button.addEventListener('click', onClickButton);
    
    function onClickButton() {
      window.alert('クリックされました');
      console.log('クリックされました');
    }
  </script>
</body>
</html>

アロー関数の場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="button">クリック</button>
  <script>
    const button = document.querySelector('.button');
    button.addEventListener('click', () => {
      window.alert('クリックされました');
      console.log('クリックされました');
    });
  </script>
</body>
</html>

オプションを指定してイベントを一度だけ呼び出す

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>イベント</title>
</head>
<body>
  <button class="button">クリック</button>
  <script>
    // オプションを指定
    const option = {
      once: true // リスナーの呼び出しを1回のみにすか 真偽値
    }
    const button = document.querySelector('.button');
    // 第3引数を使ってオプションを指定できる
    button.addEventListener('click', onClickButton, option);
    function onClickButton() {
      window.alert('クリックされました');
      console.log('クリックされました');
    }
  </script>
</body>
</html>

実行するとダイアログが画面に表示されたり、コンソールにログが表示される。これがイベント。

キーボード入力時の処理をしたとき

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>イベント</title>
</head>
<body>
  <textarea name="" class="textarea" cols="30" rows="10"></textarea>
  <script>
    document.querySelector('.textarea').addEventListener('keydown', () => {
      console.log('キーが押された');
    });

    document.querySelector('.textarea').addEventListener('keypress', () => {
      console.log('文字が入力された');
    });

    document.querySelector('.textarea').addEventListener('keyup', () => {
      console.log('キーが離された');
    });
  </script>
</body>
</html>

コンソールにキーボードの処理が表示される。

イベントハンドラーとは?

持ってる本に何故か書いてなかったのでMDNで調べてみた。

それぞれの利用可能なイベントにはイベントハンドラーがあり、これはイベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、イベントハンドラーを登録すると言います。イベントハンドラーは時にイベントリスナー と呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。

つまりイベントリスナーと同じ意味ってこと?

タイプとは?公式によれば

Event.type
type は Event インターフェイスの読取専用プロパティで、イベントの種別を表す文字列を返します。イベントが構築されると設定され、この名前は click, load, error のような特定のイベントを参照するためによく使用されます。

ドキュメントのサンプルをクリックするとイベントが発生して、ログが出力される🤔

Vuexのミューテーションのコードで、気になったもの?

store.commit({
  type: 'increment',
  amount: 10
})

オブジェクトスタイルでコミットするとき、オブジェクト全体がペイロードとしてミューテーションハンドラに渡されます。したがってハンドラの例は上記と同じです:

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

つまり、クリックイベントが発生したら、イベントリスナーが起きて、カウントされるメソッドが呼び出されるということ🤔

復習してみた感想...

ユーザーがボタンを押すとイベントが発生して、メソッドの処理が呼び出され実行される。なぜ今日まで理解できなかったのか😅
JavaScriptを何度も書き写して練習していたが、大事なのは概念を理解することだった!
DOMの知識がいるということは、こういうことだったんですね。多分🤔

Discussion

ログインするとコメントできます