仕組み
①ボタン1をクリックすると、ボタン2のクリックを強制的に起動する。続けて、④ポタン3のクリックを強制的に起動する。
└②ボタン2をクリックすると「ボタン2をクリックしました。」とメッセージを表示する。
└③ボタン2へ設定したイベントリスナーが反応してメッセージを表示する。
└⑤ボタン3をクリックすると「ボタン2をクリックしました。」とメッセージを表示する。
└⑥ボタン3へ設定したイベントリスナーが反応してメッセージを表示する。
※注:クリックは「マウスの左ボタン」「スペースキー」「エンターキー」を押して反応するイベントです。
動き
ボタン1をクリックすると、①→②→③、④→⑤→⑥が動く。③と⑥に順序性はないので③より先に⑥が終わることもある。
ボタン2をクリックすると、②→③が動く。
ボタン3をクリックすると、⑤→⑥が動く。
実験結果
つまり、強制起動したクリックにもイベントリスナーは反応します。
追加実験
連続して強制クリックを動かしボタン2の「dataset.seq」の値を変えた場合、クリックしたときの値が取れるのか?
→取れない。
よって、連続して発生する可能性があり、その状態を伝えたい場合は、連携したい状態ごとに要素を分けてクリックイベントの発生有無だけで伝えるのが望ましい。
今回のを電源ボタンで例えると、ボタン2のクリックイベントが電源ONを押したことを伝える信号で、ボタン3のクリックイベントが電源OFFを押したことを伝える信号となります。
参考にしたサイト
addEventListener()によるイベント処理の使い方!|
ボタンクリックイベントを強制的に起こす|
クリックイベントで取得したオブジェクトの使い方 まとめ|
HTML5のカスタムデータ属性(data-*)を使ってリアルタイムにバリデーションする。