Vuexやってて出てきたJavaScriptの専門用語忘れてたので勉強し直した!
参考になるドキュメント
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 // リスナーの呼び出しを１回のみにすか 真偽値
}
const button = document.querySelector('.button');
// 第３引数を使ってオプションを指定できる
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