🧼 コードから click イベントを発火する手法 `el.click()` および `el.dispatchEvent(new Event('click'))` における挙動の差 / バブリング指定について

1. とある web ページに置いてあるボタンをコードから自動でクリックするブックマークレットをつくろうとした。

2. クリックリスナー登録先要素が不明だったので、それっぽいボタン要素(el)に目星をつけて click イベントを発火。

ここで書き方により挙動の差異が。

• el.click()　 → 　クリック処理発生
• el.dispatchEvent(new Event('click'))　 → クリック処理発生せず

■ 何が違うのか

• HTMLElement.click() - Web API | MDN

  上位の要素にバブルアップし、click イベントを発生させます。

• Event() - Web API | MDN

  bubbles 論理値で、イベントがバブリングするかどうかを示します。既定値は false です。

どうやらバブリングに差があるっぽい。

検証対象のページではelの先祖要素に対しクリックリスナーが登録されていたらしく、以下の部分で違いが発生した。

• el.click() … click イベントがバブルアップし、リスナー登録された先祖要素で処理が発火。
• el.dispatchEvent(new Event('click')) … 引数で渡した Event オブジェクトのバブリングが無指定では OFF のため、先祖要素まで click イベントが伝播せず。

■ 修正

• el.dispatchEvent(new Event('click', { bubbles : true }))　 → クリック処理発生

■ 所感

自分で書いたコードならリスナー登録先が自明なので、この差に気づくこともなかったと思う。
曖昧だったバブリングについての理解が少し進む。