Javascript イベントキャプチャとバブリングメソッドの詳細な説明

Javascript イベントキャプチャとバブリングメソッドの詳細な説明

1. イベント処理モデル

イベント バブリングとイベント キャプチャリング: イベント バブリングとイベント キャプチャリングは、それぞれ Microsoft と Netscape によって提案されました。どちらの概念も、ページ内のイベント フロー (イベントが発生する順序) の問題を解決することを目的としています。

<div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
</div>

3 つのネストされた div がある場合、3 つの要素に同じイベントが登録されると、それらのトリガー順序はどのようになりますか?

1. イベントバブリング

Microsoft は、イベント バブリングと呼ばれるイベント ストリームを提案しました。構造的に(視覚的にではなく)ネストされた要素にはバブリング機能があり、つまり同じイベントが子要素から親要素にバブリングします。 (ボトムアップ)

上記の例では、バブリング方式を使用する場合、トリガー順序は d3——>d2——>d1 となるはずなので、確認してみましょう。

(1)3つのdiv要素にイベントをバインドする

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(){
      コンソールログ(このID)
   }

(2)運用実績:

赤い部分をクリックしてください:

紫色の領域をクリックします。

緑色の領域をクリックします:

以上、イベント盛り上がってます!

2. イベントキャプチャ

構造的に(視覚的にではなく)ネストされた要素には、イベント キャプチャの機能があります。つまり、親要素から子要素(イベント ソース要素)に同じイベントがキャプチャされます。 (トップダウン) (つまり、イベントはキャプチャされません)

上記の例では、バブリング方式を使用する場合、トリガー順序は d1——>d2——>d3 となるはずなので、確認してみましょう。

(1)3つのdiv要素にイベントをバインドする

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(){
      コンソールログ(このID)
   }

(2)運用実績:

赤い部分をクリックしてください:

紫色の領域をクリックします。

緑色の領域をクリックします:

イベント攻略ゲット!!!

知らせ:

  • トリガーの順序: 最初にキャプチャ、次にバブリング
  • focusblurchangesubmitresetselectなどのイベントはバブルしません。

2. イベントのバブルを防ぐ

(1) W3C標準のevent.stopPropagation(); ですが、IE9以下ではサポートされていません。

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(e){
      e.stopPropagation();
      コンソールログ(このID)
   }

緑色の領域をクリックすると、外部イベントが順番にトリガーされず、イベントのバブリングがブロックされることがわかります。

(2) IE固有: event.cancelBubble = true;

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(e){
      e.cancelBubble = true;
      コンソールログ(このID)
   }

結果は(1)と同じである。

(3)マージキャンセル:falseを返す

JavaScript では、 return falseとデフォルトの動作のみが防止されますが、jQuery ではデフォルトの動作とオブジェクトのバブルの両方が防止されます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • 最もよく使用されるJavaScriptイベントについて詳しく学ぶ
  • JavaScriptのイベントループの仕組みの分析
  • JavaScript イベント キャプチャ バブリングとキャプチャの詳細
  • jsイベント委譲の詳細な説明
  • js におけるイベントバブリングとイベントキャプチャの簡単な分析
  • JavaScript イベント ループのケース スタディ

<<:  CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

>>:  バックアップと削除のためにリアルタイムでステートメントを検出するMySQLトリガーの考え方の詳細な説明

推薦する

高速でクールな揺れアニメーション効果を実現するCSS

1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...

Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

Linux リモート コントロール Windows システム プログラム (3 つの方法)

場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...

IIS7 IIS8 リバースプロキシルールの記述、インストール、構成方法

目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...

MySql COALESCE 関数の使用コード例

COALESCE は、各パラメータ式 (expression_1、expression_2、...、...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

HTMLは入力完了を検出する機能を実装する

入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...

nginx proxy_cache キャッシュ設定の詳細な説明

序文:私は仕事柄、オンラインライブストリーミングの分野に携わっており、ビデオの再生やダウンロードには...

DockerのTLS(SSL)証明書の有効期限の問題を解決する

問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...

CSS属性のマージンの理解について話す

1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

中央のテキストの両側に水平線を描くためのCSS

1. vertical-align プロパティは次の効果を実現します。 vertical-alig...

ffmpeg 中国語パラメータの説明と使用例

1. ffmpeg がビデオ ファイルをプッシュする場合、オーディオとビデオのエンコード形式は H2...