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

JavaScript イベント処理は、すべてのクライアント アプリケーションの基礎です。ボタンのクリック、マウスの移動、フォームの送信など、ターゲット要素でイベントが発生すると、ハンドラー関数が実行されます。ハンドラーに渡されるイベント オブジェクトは、違反を防ぐためのさまざまなプロパティと多数のメソッドを提供します。
1 つの欠点は、イベントが必然的に DOM 要素に関連付けられることです。ユーザーからの情報を受け取る単純なフォームを考えてみましょう。

your message
SEND

などのハンドラーを作成できます。
document.getElementById("msgbox").addEventListener("submit", function(e) {
e.preventDefault();
var msg = e.currentTarget.getElementById("msg").value.trim();
if (msg) {
alert(msg);
}
}, false);
メッセージをツイートとして送信するか、サーバーに保存するか、その他のアクションを実行する場合はどうすればよいでしょうか? current イベントデリゲートメソッドがあります:

1、既存の追加ハンドラーにコードを追加します。
機能を追加、変更、削除するたびにハンドラー関数を固定化してテストしているため、ここを更新する必要があります。パブリッシュされたメッセージには何十もの用途がある可能性があり、それらすべてを同じコード ブロックに適用しようとしています。
使用ごとにさらに 2 つのイベント ハンドラーが作成されます。
これにより、よりエレガントなコードが生成され、メンテナンスの問題が発生します。まず、各関数は同様のアクションを実行して、メッセージを抽出して検証する必要があります。フォームを変更する必要がある場合はどうすればよいでしょうか? ID の名前を変更するだけで、各サブスクライバーのイベント処理コードを変更する必要があります。
有効なメッセージが投稿されるたびに単純にカスタムの「newMessage」イベントを発生させることができれば素晴らしいと思いませんか? 特定のフォーム ノードを参照する代わりに、単純にドキュメントまたはボディ タグを監視できればさらに良いでしょう。これはまさにカスタム イベントによって実現できることです。
カスタム イベントの発生は簡単です。名前と詳細を渡して、新しい CustomEvent オブジェクトを選択します。
var event = new CustomEvent(
"newMessage",
{
詳細: {
message: "Hello World!",
time : new Date(),
},
bubbles: true,
cancelable: true
}
); この例では、「newMessage」がカスタマイズされたイベント タイプです。 2 番目のパラメーターは、3 つのプロパティを持つオブジェクトです:
詳細: カスタマイズされたイベント情報を提供する子オブジェクト。この例では、メッセージと時刻を追加しました。
バブル: これが true の場合、イベントは、イベントをトリガーした祖先要素でバブルされます。
Cancelable: これが true の場合、イベント オブジェクトの stopPropagation() メソッドを使用してイベントをキャンセルできます。
ここで、このイベントを特定の要素にディスパッチする必要があります。
document.getElementById("msgbox").dispatchEvent(event);
次のようなコードを使用して、任意の数のハンドラーがこのイベントをサブスクライブできます。

標準イベント ハンドラープログラムは、上記の送信された HTML フォームを検索します。この関数は、現在のメッセージが有効であると仮定してそれを取得し、新しい「newMessage」イベントを送出します。
var msgbox = document.getElementById("msgbox");
msgbox.addEventListener("submit", SendMessage, false);
// 新しいメッセージ: newMessage イベントを発生させる
function SendMessage(e) {
e.preventDefault();
var msg = document.getElementById("msg").value.trim();
if (msg && window.CustomEvent) {
var events = new CustomEvent("newMessage", {
detail: {
message: msg,
time: new Date(),泡: 本当、CanceLable: True}});
e.currentTarget.dispatchevent (event);
}}
治療プログラムは「NewMessage」イベントをサブスクライブできるようになりました。このイベントは、有効なメッセージが存在する場合にのみ発生します。バブルは true に設定されているため、イベントはフォームまたはその祖先 (ルート ドキュメントなど) に適用できます。
// newMessage イベントをリッスンする
document.addEventListener("newMessage", newMessageHandler, false);
// newMessage イベント ハンドラー
function newMessageHandler(e) {
LogEvent(
""+e.currentTarget.nodeName+ のイベント サブスクライバー" , ".+E.detail.time.tolocalestring ()+": "+E.Detail.Message
)
}
メッセージ自体から詳細を抽出できます。メッセージプロパティのイベントオブジェクト。

ブラウザの互換性

この記事の執筆時点では、CustomEvent をサポートする Chrome、Firefox、Opera がターゲットです。これは Safari の夜間バージョンで利用できるため、ブラウザーに関しては間もなく登場する可能性があります。

IE9 以下はオブジェクトをサポートしていません。幸いなことに、一部の JavaScript ライブラリはカスタム イベント委任をサポートしているため、クロスブラウザー ソリューションについてはすぐに SitePoint を検討してください。