JavaScriptカスタムイベントの必須ガイド

概要: このチュートリアルでは、カスタムイベントの作成とディスパッチなど、JavaScriptカスタムイベントについて学習します。

JavaScriptカスタムイベントの概要

次の関数は、要素の背景色をyellowに変更することで、要素を強調表示します。

function highlight(elem) {
    const bgColor = 'yellow';
    elem.style.backgroundColor = bgColor;
}Code language: JavaScript (javascript)

要素を強調表示した後にコードを実行するには、コールバックを使用することができます。

function highlight(elem, callback) {
    const bgColor = 'yellow';
    elem.style.backgroundColor = bgColor;

    if(callback && typeof callback === 'function') {
        callback(elem);
    }
}
Code language: JavaScript (javascript)

以下は、highlight()関数を呼び出し、<div>要素に境界線を追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Custom Event Demo</title>
</head>
<body>
    <div class="note">JS Custom Event Demo</div>
    <script>
        function highlight(elem, callback) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;

            if (callback && typeof callback === 'function') {
                callback(elem);
            }
        }

        let note = document.querySelector('.note');
        function addBorder(elem) {
            elem.style.border = "solid 1px red";
        }

        highlight(note, addBorder);
    </script>
</body>
</html>Code language: HTML, XML (xml)

コードをより柔軟にするために、カスタムイベントを使用できます。

JavaScriptカスタムイベントの作成

カスタムイベントを作成するには、CustomEvent()コンストラクタを使用します。

let event = new CustomEvent(eventType, options);Code language: JavaScript (javascript)

CustomEvent()には2つのパラメータがあります。

eventTypeは、イベントの名前を表す文字列です。
optionsは、イベントに関するカスタム情報を含むdetailプロパティを持つオブジェクトです。

次の例は、highlightという新しいカスタムイベントを作成する方法を示しています。

let event = new CustomEvent('highlight', {
    detail: {backgroundColor: 'yellow'}
});
Code language: JavaScript (javascript)

JavaScriptカスタムイベントのディスパッチ

カスタムイベントを作成した後、dispatchEvent()メソッドを使用して、イベントをDOM要素にアタッチしてトリガーする必要があります。

domElement.dispatchEvent(event);Code language: JavaScript (javascript)

JavaScriptカスタムイベントの例

すべてをまとめる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Custom Event</title>
</head>
<body>
    <div class="note">JS Custom Event</div>
    <script>
        function highlight(elem) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;

            // create the event
            let event = new CustomEvent('highlight', {
                detail: {
                    backgroundColor: bgColor
                }
            });
            // dispatch the event
            elem.dispatchEvent(event);
        }

        // Select the div element
        let div = document.querySelector('.note');

        // Add border style
        function addBorder(elem) {
            elem.style.border = "solid 1px red";
        }

        // Listen to the highlight event
        div.addEventListener('highlight', function (e) {
            addBorder(this);

            // examine the background
            console.log(e.detail);
        });

        // highlight div element
        highlight(div);
    </script>
</body>
</html>Code language: HTML, XML (xml)

仕組み

まず、要素を強調表示し、highlightイベントをトリガーするhighlight()関数を宣言します。
次に、querySelector()メソッドを使用して、<div>要素を選択します。
3番目に、highlightイベントをリッスンします。イベントリスナー内で、addBorder()関数を呼び出し、コンソールにdetailプロパティを表示します。
最後に、highlightイベントをトリガーするhighlight()関数を呼び出します。

カスタムイベントを使用する理由

カスタムイベントを使用すると、別のコードが完了した後に実行するコードを分離できます。たとえば、イベントリスナーを別のスクリプトに分離できます。さらに、同じカスタムイベントに複数のイベントリスナーを設定できます。

まとめ

カスタムイベントを作成するにはCustomEvent()コンストラクタを使用し、イベントをトリガーするにはdispatchEvent()を使用します。

このチュートリアルは役に立ちましたか？