JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガーされると、そのイベントはドキュメントまで段階的に先行要素に伝播し、一部のブラウザではウィンドウに到達することがあります。すべてのイベントにバブリングがあるわけではありません。例: blurイベント、 focusイベント、 loadイベント

2. イベント委任: イベント キャプチャは、イベント バブリングと正反対です。イベントが要素をトリガーするまで、最上位の祖先要素から開始されます。

js イベント キャプチャは通常、DOM2 イベント モデルaddEventListenerを通じて実装されます。

target.addEventListener(タイプ、リスナー、useCapture)

3 番目のパラメータはデフォルトで false に設定されており、イベントがバブリング フェーズでトリガーされることを示します。true に設定すると、キャプチャ フェーズでトリガーされます。一般に、イベント キャプチャは私たちの作業ではほとんど使用されないようです。しかし、まだ理解する必要がある

<div id="ボックス">
    <div id="middle">
        <div id="内部"></div>
    </div>
</div>
<スクリプト>
//イベントキャプチャ window.onload=function(){
    box = document.getElementById("box"); とします。
    middle = document.getElementById("middle"); とします。
    inner を document.getElementById("inner"); とします。
    box.addEventListener("click",function(){console.log("box")},true);
    middle.addEventListener("click",function(){console.log("middle")},true);
    inner.addEventListener("click",function(){console.log("inner")},true);
}
</スクリプト>
innerをクリックすると、コンソールにbox、middle、innerと出力されます。

イベントのバブリングを停止

通常、多数のイベントバブリングイベントが使用されますが、特定の子タグでは親にイベントを渡す必要がない場合があります。このとき、そのイベントのバブリングを防ぐ必要があります。

一般的に、stopPropagation はイベントのバブリングを防ぐために使用されます。IE では、cancelBuble=true が使用されます。stopPropagation もイベント オブジェクト (Event) のメソッドです。その機能は、対象要素のイベントのバブリングを防ぐことですが、デフォルトの動作を防ぐことはできません。

//イベントのバブルを防ぐ let btna = document.getElementById('btn');
btna.onclick=関数(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
 };

3. イベント委任: イベント委任はイベント プロキシとも呼ばれます。イベント委任ではイベント バブリングを利用します。イベント ハンドラーを 1 つだけ指定することで、特定のタイプのすべてのイベントを管理できます。

利点: DOM 操作を減らすと、Web ページのパフォーマンスが向上します。ページの親要素と多くの子要素が同じイベントを操作する必要がある場合、各要素にイベントをバインドすることはできません。

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<スクリプト>
ptclick = document.getElementById('getNum'); とします。
lilist = ptclick.querySelectorAll('li') とします。
for(let i=0;i<lilist.length;i++){
    lilist[i].index = i;
};
ptclick.onclick = 関数(e){
    var e = e || window.event;
    var ターゲット = e.target || e.srcElement;
    console.log(e.target.index);
};
</スクリプト>

要約する

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

以下もご興味があるかもしれません:
  • js におけるイベントバブリングとイベントキャプチャの簡単な分析
  • JavaScript におけるイベント バブリング メカニズムの詳細な分析
  • JS でのイベント バブリングとイベント キャプチャの概要
  • JSバブリングイベントとイベントキャプチャ例の詳細な説明
  • jsイベント委譲の詳細な説明
  • JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス

<<:  CSS マルチカラムレイアウトソリューション

>>:  HTMLページでよく使われるいくつかの小さなメソッド

推薦する

Win10 インストール Linux システム チュートリアル ダイアグラム

Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...

IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...

Vueでスケルトンスクリーンを実装する例

目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...

MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?

私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...

Linuxの運用と保守、基本的なプロセス管理、リアルタイム監視と制御

目次1. バックグラウンドで実行されるジョブ2. 信号を使用してプロセスを制御する基本的なプロセス管...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

Dockerイメージをプライベートリポジトリにアップロードする方法の例

イメージは、GitHub と同様に Docker パブリック リポジトリに直接簡単にプッシュできます...

React コードを共有するためのベストプラクティス

プロジェクトがある程度複雑になると、必然的にロジックの再利用の問題に直面することになります。 Rea...

el-select のスタイルを変更する方法の詳細な説明: popper-append-to-body と popper-class

elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...

JS での矢印関数と this の記述と理解

目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...

Mysql の使用法の概要

導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...

Ubuntu環境でのPHP関連のパスと変更方法

Ubuntu環境におけるPHP関連パスPHP パス /usr/bin/php phpize5 /us...

Navicat For MySQL の使い方に関する簡単なチュートリアル

推薦する: Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル...

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...