【JavaScript】バブリング (stopPropagation, preventDefault)

イベントはどの要素に登録できる？

イベントは、EventTarget インターフェースであれば何にでも登録できる。
そのため window オブジェクトにも登録できる。

window.addEventListener("click", () => {
  console.log("clicked from window");
});

Shion

バブリング

下記のように、window オブジェクトと、button 要素に onclick イベントを登録し、ボタンを押下した際、どのようになるか。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button>Click Me!</button>
  </body>
  <script>
    window.addEventListener("click", () => {
      console.log("clicked from window");
    });

    const button = document.querySelector("button");
    button.onclick = () => {
      console.log("button clicked");
    };
  </script>
</html>

コンソールには以下のように出力された。

button clicked
clicked from window

ボタンに登録しているイベントが発火された後、window に登録したイベントがよばれている。
これは、よばれた要素から window オブジェクトまで順番に登録されたイベントが呼ばれるためである。
これを バブリング と呼ぶ。

基本的に全てのイベントでバブリングは発生するが、一部発生しないイベントがある（e.g. focus）ため詳細は仕様を確認する必要がある。

Shion

バブリングを止める

stopPropagation() を使用する。

window.addEventListener("click", () => {
  console.log("clicked from window");
});

const button = document.querySelector("button");
button.onclick = (e) => {
  console.log("button clicked");
  e.stopPropagation();
};

これでボタンを押下すると、コンソールには以下のように出力された。
window の方まで伝播していないのが確認できる。

button clicked

Shion

 ブラウザのデフォルトの挙動を止めるブラウザにはデフォルトで動作するものがある。

例えば、a タグをクリックした際は、href 属性で指定しているエンドポイントに遷移する。

また、input タグにキーボードで入力した際は、入力したキーが表示される。
こうしたブラウザで用意しているデフォルトの挙動を止めるのが、preventDefault である。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a href="https://google.com">Google</a>
  </body>
  <script>
    const anchor = document.querySelector("a");
    anchor.onclick = (e) => {
      e.preventDefault();
    };
  </script>
</html>
また、一部デフォルトの挙動を止めることができないものも存在するため、詳細は仕様を確認する必要がある。
なお、preventDefault しても、バブリングは発生するため注意。

このスクラップは2024/12/30にクローズされました