技術

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

関連記事

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

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

no image

【Rails】そろそろデバッグしましょうか

どうも中田です。 今までrailsの開発はIDEを使わずテキストエディタだけでや …

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …

[Slack] スラッシュコマンドでamazon検索

Slackネタです。 amazonがSlackの買収を検討しているとかいないとか …

no image

【Rails】パッと簡単クロスドメイン対応

どうも、中田です。 最近専らRailsでは画面を作るというより、APIを作るとい …