バブリングとは?【シンプル解説】

バブリングとは?【シンプル解説】

こんにちは。

今回はバブリングについて紹介していきます。

 

バブリングとは【イベントの伝達】という意味です。

<div>の中の<ul>の中の<li>をクリックした場合、<li>をクリックしたと同時に<ul>をクリックしたことにもなりますし、<div>をクリックしたことにもなります。

こういった親要素への伝達をストップさせたいときにバブリングの制御を行います。

バブリングを制御するためのメソッドは下記の2つです。

stopPropagation() = 親要素への伝播をキャンセル
② return false; = 親要素への伝播をキャンセルし、その要素のイベントもキャンセル

① stopPropagation()

下記のような実装の場合に【stopPropagation()】を使います。

sectionがクリックされたときは【 sectionにclass=”select” 】をつけるが
section内のliをクリックした場合は【 liにclass=”select” 】をつけて【 sectionにはclass=”select” 】をつけないという処理

sectionの領域の中にliが含まれているため、liをクリックしたときliのクリックイベントが実行され
先祖要素に伝達し、sectionにもクリックイベントがあるため、そのイベントも実行されます。
その伝達をstopPropagation()でストップさせているためliのクリックイベントが実行された時はsectionの
クリックイベントは実行されません。

② return false

下記のような実装の場合に【return false】を使います。

sectionがクリックされたときは【 sectionにclass=”select” 】をつけて
section内のaをクリックした場合は【 aにclass=”select” 】をつけて【 sectionにはclass=”select” 】をつけない
そしてaタグの機能(ページ遷移)を無効化する

return falseは【stopPropagation()】と【preventDefault()】 の機能をひとつにまとめたものです。

まとめ

バブリングを制御する機会は少ないかもしれませんが、いざという時につまづかないよう覚えていただければと思います。


Previous: はやくJavaScriptでクラスを使いたい Next: jQueryの基本

© 2017 ALL CONNECT Inc. All Rights Reserved.