Event が二重に実行される際は二重発火 / 二重キャッチを疑う

SWEET v20180317 を書いていて詰まった点にチャットになぜか二重投稿してしまう、という現象があった。この機能は次のような手順でやっていた。前提として以下のコンポーネントがある。

• どどんとふとの通信コンポーネントとアプリケーションを繋ぐ親コンポーネント
• アプリケーションとなる子コンポーネント
• チャットメッセージをユーザに入力させる孫コンポーネント

これらは次のように動作する。

1. ユーザは孫コンポーネントに内容を入力し、送信ボタンを押す。送信された旨のイベントが発火する
2. 子コンポーネントは送信された旨のイベントをキャッチし、整形してチャット送信を依頼するイベントを発火する
3. 親コンポーネントは子コンポーネントからチャット送信を依頼するイベントをキャッチし、どどんとふとの通信コンポーネントに渡す

私がやらかしたミスは 2 の子コンポーネントがイベントをキャッチするためのイベントバインドを二重にやっていた。つまり以下のようなことをやっていた。

$('#childComponent').on('grandChildComponent-event-sendChat'. sendChatFunction);
$('#childComponent').on('grandChildComponent-event-sendChat'. sendChatFunction);

これで sendChatFunction が二重に動作してしまい、チャットが二重送信されていた。

なお、当初は孫コンポーネントが二重にイベントを発火している可能性を疑っていた。しかし、各イベントにユニーク ID を試しに振ってみたところ、どうもユニーク ID が二重イベントの双方で一致するので二重発火ではなさそうだな、と気づいたのであった。

くだらないミスだけれども、同じようなことで「あれ？」となった際の観点として。