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トリガーの考え方の詳細な説明

推薦する

Linux で nohup ログ出力が大きすぎる問題の解決方法の詳細な説明

最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...

Linux サービス管理の 2 つの方法、service と systemctl の詳細な説明

1.サービスコマンドサービスコマンドは実際には/etc/init.dディレクトリに移動し、関連プログ...

Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在

脆弱性の紹介SigRed の脆弱性はワーム化可能であるため非常に危険です。つまり、ユーザーの介入なし...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

MySQLの自動増分主キーIDはこのように処理されません

MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

Vueでeslintを使用する方法の詳細な説明

目次1. 説明2. 関連する依存パッケージをダウンロードする3. 設定ファイル .eslintrc....

入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法

入力ボックス内のカーソルのサイズが一定ではありませんIE7とChromeの違いは非常に明白ですまず、...

MySQL の厄介な Aborted 警告をケーススタディで分析する

この記事では主に、MySQL の Aborted アラームに関する関連コンテンツを紹介し、参考と学習...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

Windows 10 での MySQL 8.0.19 のインストールと設定のチュートリアル

来学期にMySQLを勉強します。事前に自宅で練習していませんでした。インストールに時間がかかるとは思...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

Vue.js ソースコード解析のカスタム手順の詳細な説明

序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...