カスタムイベント
独自のイベントを作成して dispatch します。
「カスタムイベント」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
組み込みイベントを超えて
DOMでは、CustomEventを使って独自のイベントを作成し、ディスパッチできます。これによりアプリの各部分を疎結合にできます。1つのコンポーネントが何か起きたことを通知し、ほかのコンポーネントは直接参照することなくそれをリッスンできます。
CustomEvent を作成する
new CustomEvent(name, options)で作成します。名前には任意の文字列を指定できます。
const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"イベントをディスパッチする
dispatchEventを使ってターゲット上でイベントを発生させます。その名前でターゲットに登録されたリスナーが実行されます。イベントがバブルする場合は、祖先要素に登録されたリスナーも実行されます。
element.dispatchEvent(new CustomEvent("cart:add"));イベントをリッスンする
addEventListenerを使い、独自の名前を指定して、ネイティブイベントとまったく同じようにリッスンします。
element.addEventListener("cart:add", () => {
console.log("Something was added to the cart");
});detail でデータを渡す
detailプロパティを使ってペイロードを設定します。リスナーはevent.detailからその値を読み取ります。
const evt = new CustomEvent("cart:add", {
detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);ペイロードを読み取る
リスナー内では、event.detailに渡した値が格納されています。オブジェクト、配列、文字列、数値など、どのような値でも渡せます。
element.addEventListener("cart:add", (e) => {
console.log(e.detail.id, e.detail.qty); // 42 2
});イベントをバブルさせる
カスタムイベントはデフォルトではバブルしません。bubbles: trueを設定すると、祖先要素やデリゲーションされたリスナーでも受け取れるようになります。
const evt = new CustomEvent("cart:add", {
bubbles: true,
detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listencancelable オプション
cancelable: trueを設定すると、リスナーからpreventDefault()を呼び出せるようになります。ディスパッチする側はdispatchEventの戻り値を確認して、イベントがキャンセルされたかどうかを判断します。
const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();疎結合にするパターン
カスタムイベントを使うと、モジュール同士が互いにインポートしなくても通信できます。ロガーや分析レイヤーは、documentでアプリ全体のイベントをリッスンできます。
document.addEventListener("user:login", (e) => {
analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
new CustomEvent("user:login", { detail: { userId: 7 } })
);命名規則
イベント名にはcart:addやuser:loginのように名前空間を付け、ネイティブイベントとの衝突を避けるとともに、関連するイベントを明確にグループ化します。
古い構文と新しい構文
古いコードでは、従来のdocument.createEvent APIを見かけることがあります。より簡単で、現在記述すべき唯一の形式である最新のnew CustomEvent(...)コンストラクターを使ってください。
const evt = new CustomEvent("ready", { detail: 1 });確認問題
カスタムイベントについて理解度を確認します。
まとめ
new CustomEvent(name, { detail, bubbles, cancelable })とdispatchEventを使って独自のイベントを作成します。event.detailでペイロードを読み取り、デリゲーションにはバブリングを有効にし、キャンセル可能なアクションにはcancelableを使います。カスタムイベントによってコンポーネントを疎結合にし、すっきりしたパブリッシュ・サブスクライブ形式にできます。
よくある質問
「カスタムイベント」レッスンは無料ですか？
はい。「カスタムイベント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「カスタムイベント」で何を学びますか？
独自のイベントを作成して dispatch します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「カスタムイベント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。