技術

[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

gormでバルクインサート

こんにちは gormでレコードを作成する時は user := User{Name …

Slack Tasker系アプリで絵文字ステータスを自動設定(android 「Automate」)

Slackの絵文字ステータス、皆さん使っているでしょうか? 私は自分の居る場所に …

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …

no image

CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: tra …

no image

【ionic】タブをタップで最上部にスクロール!

どうも、中田です。 今日はタブをタップでトップにゴーの日です。 どういう日かとい …