JavaScriptでカスタムイベントを作成する方法

コアポイント

• JavaScriptイベント処理はすべてのクライアントアプリケーションの基礎ですが、それらはDOM要素に関連付けられており、十分に柔軟ではない場合があります。 JavaScriptカスタムイベントこの問題を解決し、柔軟性とメンテナンスの容易さを高めます。
JavaScriptの作成カスタムイベントの作成には、新しい
• オブジェクトへのイベント名、詳細、オプションの渡しが含まれます。作成後、CustomEventメソッドを使用して、特定の要素でこのイベントを発送できます。 dispatchEvent
複数のハンドラーがカスタムイベントを購読できるため、イベントに基づいて異なるアクションを実行できます。 Chrome、Firefox、およびOperaはカスタムイベントをサポートしており、一部のJavaScriptライブラリもサポートを提供しています。

javaScriptイベント処理は、すべてのクライアントアプリケーションの基礎です。ターゲット要素（ボタンクリック、マウスの動き、フォームの提出など）でイベントが発生すると、ハンドラー機能が実行されます。イベントオブジェクトがハンドラーに渡され、デフォルト操作をブロックするさまざまなプロパティと多くの方法を提供します。欠点の1つは、イベントがDOM要素に密接にリンクされていることです。ユーザーのコメントを受け入れる単純なフォームを考えてみましょう：

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

フォームを送信するとき、画面にメッセージをエコーするためにハンドラーを書くことができます。たとえば

ツイートとしてメッセージを送信したり、サーバーに保存したり、他のアクションを実行したりする場合はどうなりますか？既存のイベント委任方法には、2つのオプションがあります。

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

既存のハンドラーにさらにコードを追加します。 機能が追加、変更、または削除されるたびに、ハンドラー機能を更新およびテストする必要があるため、これは十分に柔軟ではありません。投稿されたメッセージには数十の用途があり、それらをすべて同じコードブロックに適用しようとしています。

1. 目的ごとにイベントハンドラーを増やします。 これにより、よりエレガントなコードが生成されますが、メンテナンスの問題が発生します。まず、各関数は、メッセージを抽出および検証するために同様の操作を実行する必要があります。フォームを変更する必要がある場合はどうなりますか？ IDを変更するだけで、各サブスクライバーのイベント処理コードを変更する必要があります。

2. 有効なメッセージを投稿するときに、カスタム「NewMessage」イベントを単にトリガーできればいいのに、いいことではないでしょうか？特定のフォームノードを参照する代わりに、

   または
タグを監視できればさらに良いでしょう。カスタムイベントにより、これを行うことができます。カスタムイベントのトリガーは簡単です。

この例では、「NewMessage」はカスタムイベントタイプです。 2番目のパラメーターは、3つの属性を持つオブジェクトです。

• detail：イベントに関するカスタム情報を提供する子オブジェクト。この例では、メッセージと時間を追加しました。
• bubbles：もしtrueの場合、イベントはイベントをトリガーした要素の祖先に泡立ちます。
• cancelable：trueの場合は、イベントオブジェクトのstopPropagation()メソッドを使用してイベントをキャンセルできます。

次に、特定の要素でこのイベントを派遣する必要があります。

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

次のコードを使用して、このイベントを購読できます。

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

デモページ

この例は、テクニックを示しています。カスタムイベントデモページを表示します。標準のイベントハンドラーは、上記のHTMLフォームの提出を探します。この関数は現在のメッセージを取得し、それが有効であると仮定すると、新しい「NewMessage」イベントが派遣されます。

ハンドラーは、「NewMessage」イベントを購読できるようになりました。イベントは、有効なメッセージが存在する場合にのみトリガーされ、

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

が

に設定されているため、イベントはフォームまたはルートbubblesなどの祖先に適用できます。 > true メッセージ自体は、イベントオブジェクトのdocument属性から抽出できます。

<code class="language-javascript">document.getElementById("msgbox").dispatchEvent(event);</code>

ブラウザー互換性detail.message執筆時点で、Chrome、Firefox、およびOperaサポート

オブジェクト。 Safariの夜間バージョンで利用できるため、そのブラウザですぐに利用できるようになります。このオブジェクトは、IE9以下ではサポートされていません。幸いなことに、いくつかのJavaScriptライブラリはカスタムイベントデリゲートをサポートしているため、SitePointをご期待ください。

（擬似オリジナルの目標と一致せず、長すぎるため、FAQの部分はここで省略されています。）

以上がJavaScriptでカスタムイベントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。