25.1Events / Payload

イベントのペイロードはオブジェクトで渡す

イベントにデータを渡す際は、生の値を渡すのではなくオブジェクトリテラルを渡します。これにより、後からデータを追加する際にイベントハンドラをすべて更新する必要がなくなります。

イベントに `listing.id` という単一の値を渡すと、将来的に `listing.name` も渡したくなった場合に、イベントを発行する側と、それを受け取るすべてのハンドラのシグネチャを変更する必要があり、非常に手間がかかります。最初から `{ listingID: listing.id }` のようにオブジェクトで渡しておけば、後から `{ listingID: listing.id, listingName: listing.name }` のようにプロパティを追加するだけで済み、ハンドラ側は必要なデータだけを使えばよいため、後方互換性が保たれます。

❌ Bad

// bad
$(this).trigger('listingUpdated', listing.id);

$(this).on('listingUpdated', (e, listingID) => {
  // do something with listingID
});

✅ Good

// good
$(this).trigger('listingUpdated', { listingID: listing.id });

$(this).on('listingUpdated', (e, data) => {
  // do something with data.listingID
});