イベントのバブリング - 駆け出しのエンジニア日記

バブリング・・・

何らかのイベントが発生した場合、その要素だけでイベントが発生するのではなくその要素の親要素へ順にイベントが伝わり、親要素でも同じイベントが発生します。（上にイベントが伝達されていくこと）

バブル（泡）が上に上がっていくのをイメージしてもらえればわかりやすいと思います。

サンプルを見てみましょう。

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bubbling</title>
</head>

<body>
 <section onclick="alert('セクションクリック')">
 <p onclick="alert('段落クリック')">
 ここは段落：
 <button onclick="alert('ボタンクリック')">クリック</button>
 </p>
 </section>
 <script src="app.js"></script>
</body>
</html>

インラインでクリックイベントを設定しておきます。

1つ目

2つ目

3つ目

上記のようにイベントが上に伝達されているのが確認出来ます。これがバブリングです。（buttonタグ→pタグ→sectionタグへと上に上がっています。）

また親要素へとイベントが伝達していきますが、途中でこれ以上の伝達を行わないようにイベントの伝達を停止することができます。

つまりバブリングのキャンセルです。

　 e.stopPropagation();
 evt.stopPropagation();

このように記述できます。

実際に書いてみます。

先ほどのbuttonタグに対してバブリングのキャンセルを行なってみます。

const button = document.querySelector('#stop');
button.addEventListener('click', function (e) {
 //バブリングの中止メソッド
 e.stopPropagation();
 console.log('stop');
})