技術

[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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【Rails】RailsでFriendlyURLを設定する

こんばんは 例えばRailsでブログ記事ページのルーティングを設定するときは b …

[Cocos Creator] java.util.NoSuchElementException

どうも中田です CocosCreatorでビルド後、AndroidStudioで …

Sequel Proで本番DBに接続できない!

こんにちは。たなかです。 最近はDIY記事ばかりでしたので、久々にエラー解消記事 …

no image

【Vagrant】はじめまして!はじめました!

どうも中田です。 仮想マシンと言えば、VMWare、EC2、VirtualBox …

Dockerでwheneverが動かない (bundler: failed to load command: bin/rails (bin/rails))

どうも中田です。 久々の投稿になります。 正確にはwheneverで登録したcr …