【JavaScript】イベントリスナーについて

タグ :

JAVASCRIPT

PROGRAMMING

イベントリスナーは、特定のイベント（クリック、キー入力、マウス移動など）が発生したときに実行される関数（イベントハンドラー）を登録するためのメソッドです。

1 よく使うイベントリスナー
2 イベントリスナーの使用例

よく使うイベントリスナー

click

クリックされたときに発生するイベント。



element.addEventListener('click', function() {
    // クリック時の処理
});

mouseover / mouseout

マウスが要素の上に乗ったとき、または外れたときに発生するイベント。



element.addEventListener('mouseover', function() {
    // マウスオーバー時の処理
});

element.addEventListener('mouseout', function() {
    // マウスアウト時の処理
});

keydown / keyup

キーが押されたとき、または離されたときに発生するイベント。



document.addEventListener('keydown', function(event) {
    // キー押下時の処理
});

document.addEventListener('keyup', function(event) {
    // キーリリース時の処理
});

submit

フォームが送信されたときに発生するイベント。



form.addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトのフォーム送信を防ぐ
    // 送信時の処理
});

input / change

入力フィールドの値が変更されたときに発生するイベント。



inputElement.addEventListener('input', function() {
    // 入力時の処理
});

inputElement.addEventListener('change', function() {
    // 値変更時の処理
});

resize

ウィンドウサイズが変更されたときに発生するイベント。



window.addEventListener('resize', function() {
    // ウィンドウリサイズ時の処理
});

scroll

要素がスクロールされたときに発生するイベント。



window.addEventListener('scroll', function() {
    // スクロール時の処理
});

イベントリスナーの使用例



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベントリスナーの例</title>
</head>
<body>
    <button id="myButton">クリックしてね</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('ボタンがクリックされました');
        });
    </script>
</body>
</html>

この例では、ボタンがクリックされたときにアラートを表示します。

前ページに戻る