はじめに
いままでなんとなくで理解していたe.preventdefault()にいて考える機会があったのでざっとまとめてみます
挙動について
e.preventdefault()はイベント自体を伝播しないようにするものだと思っていたが、イベント自体をそもそもしないということがわかった
たとえば、入力をしているときにe.preventdefaultをした場合はそこで発生したイベント(たとえばキーダウン)などはなかったことにする
勘違いしていたやつ
イベントは発生するが途中で伝播を止めるのはe.propagationというのが別にある
この動きこそが当初勘違いしていたものであった
では伝播を阻止するのはなぜか
例えばAコンポーネントの中にBコンポーネントが入っていたとする
Aコンポーネントでイベントをうけとるとユーザーを削除
Bコンポーネントでイベントをうけとるとユーザーフォームの内容を確定する
としたときに、Bコンポーネントで発生したイベントをBコンポーネントで阻止しておかないとAコンポーネントに伝播して、Aコンポーネントでは削除をしたいのかとイベントから判断してユーザーを削除することになる
実際にこんな実装になることは殆どないが、イメージはこんなかんじ
おわりに
図解するともっとわかりやすいのですが、今回はざっとまとめるだけにしました
なんとなく理解していたのが理解したというところまでいったのでよかったです