[JavaScript]イベントハンドラ

イベントハンドラとは

JavaScriptでは、イベントハンドラという、ウェブページ上でユーザーの操作やブラウザの動作、つまりはイベントに反応するために使用されるコードがあります。

・イベント: ウェブページ上で発生するユーザーの操作やブラウザの動作を指すトリガー
・イベントハンドラ: イベントが発生した際に実行する関数を紐付けるための方法

ユーザーがボタンをクリックしたとき、特定の要素にカーソルを合わせたとき、キーボードのキーを押したとき、フォームが送信されたときなど、さまざまなイベントが発生したとき、それらのイベントに対して、JavaScriptでイベントハンドラを作成することで特定のアクションや処理を実行できるようになります。

以下で、よく使われる５つのイベントハンドラを紹介していきます！

1. ボタンクリック時

ボタンがクリックされたときに実行されるコードを定義するイベントハンドラ

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
    // ボタンがクリックされた時の処理
});

2. マウスオーバー時

カーソルが要素に乗ったときに実行されるコードを定義するイベントハンドラ

const element = document.getElementById('myElement');

element.addEventListener('mouseover', function() {
    // カーソルが要素に乗った時の処理
});

3. キープレス時

キーボードのキーが押されたときに実行されるコードを定義するイベントハンドラ

document.addEventListener('keypress', function(event) {
    // キーボードのキーが押された時の処理
    const key = event.key;
});

4. フォーム送信時

フォームが送信されたときに実行されるコードを定義するイベントハンドラ

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    // フォームが送信された時の処理
    event.preventDefault(); // ページのリロードを防ぐ
});

5. ウィンドウのロード完了時

ページが完全に読み込まれた後に実行されるコードを定義するイベントハンドラ

window.addEventListener('load', function() {
    // ページのロードが完了した後の処理
});

まとめ

これらはJavaScriptでよく使用されるイベントハンドラの一部です。
他にも様々なイベントハンドラがあるので、調べてみてくださいね。