JSバブリングイベントの詳細説明とイベントキャプチャ例-jsチュートリアル-php.cn

JSバブリングイベントの詳細説明とイベントキャプチャ例

高洛峰

リリース： 2016-12-05 11:41:47

オリジナル

1389 人が閲覧しました

この記事では、JS のバブリングイベントとイベントキャプチャを例とともに分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

概要

1. [myDiv] をクリックします。順序は、Div-Body-Html-Document-Window

2. 他の空白の場所をクリックします。順序は Html-Document-Window です

3. 続けて 2 回クリックすると、2 回連続して実行されます

4. バブリングの前提として、親も対応するイベントを定義します

より複雑な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件</title>
  <script type="text/javascript">
    window.onload = function(){
      window.onclick = function(){
        alert("Window"); // 顶级
      };
      document.onclick = function(){
        alert("Document"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

ログイン後にコピー

概要

1. クリックの実行結果は、

Window - true

Document - true

Html - true

Body - true

Div - true

Div - falseです。

Div - click

Body - false

Body - click