技術

[JS] イベントバブリングまとめ

投稿日:

どうも中田です

いつも忘れちゃうんですよ。
javascriptのイベントバブリング制御。
いい加減調べずにパッと書けるようになっておきたい。

イベントバブリングとは

親子構造になったHTML要素があって、子要素に対しクリックしたイベントが親要素に伝わること

例えば、下記のような場合childのhtml要素をクリックした場合、
childのclickイベントはもちろんですが、parentのclickイベントまで動作しちゃいます
「I’m child」と「I’m parent」が両方コンソールに出ちゃう感じですね

<div class="parent">
  <div class="child">
  </div>
</div>

<script>
  $("parent").on("click", () => {
    console.log("I'm parent");
  });
  
  $("child").on("click", () => {
    console.log("I'm child");
  });
</script>

その親要素へのクリックイベントの伝搬を抑止するために、return false やら preventDefault やら stopPropagation をchildのclickイベント内に書きます。

ここからは多分私の英語力の問題だと思うんですが、
preventDefaultstopPropagation のどっちがどっちか。。
なので、意味をちゃんと理解しようかと。

prevent

意味: 防ぐ
preventDefault: 備え付け機能を無効にする

自身のタグの機能を無効にするってことは
aタグとかのclickイベントに記載したら、画面遷移はしないけど、
親への伝搬はするってことになります

propagation

意味: 伝搬
stopPropagation: 伝搬するのをやめる

自身のイベントを実行して親への伝搬はしないってことは
aタグとかのclickイベントに記載したら、画面遷移はするけど、
親への伝搬はしないということになります

…ゆえに〜こういうまとめになる↓↓↓

イベントバブリングのまとめ

return false preventDefault stopPropagation 記載なし
自身のevent処理 × ×
親伝搬 × ×

よし、ここにアウトプットしたからもう忘れない。(はず!)

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

どうも中田です。 Rails5.2から config/credentials.y …

[Rails] バージョン上げるときに気をつけること

どうも中田です。 セキュリティ診断とかで引っかかってrailsのバージョンあげた …

no image

javascriptで画面サイズ毎に処理をしたい時

こんにちは 今回はjavascriptで画面サイズ毎に処理をしたい時にオススメの …

[Rails] TinyTds::Error (closed connection)

どうも中田です。 たぶん、この記事で救われるエンジニアの方はおそらく1人いればよ …

no image

[Angular]リアクティブフォームの頻出クラスと定義について

Angularのチュートリアルでは、フォームはngModelで双方向バインドでき …