1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガーされると、そのイベントはドキュメントまで段階的に先行要素に伝播し、一部のブラウザではウィンドウに到達することがあります。すべてのイベントにバブリングがあるわけではありません。例: 2. イベント委任: イベント キャプチャは、イベント バブリングと正反対です。イベントが要素をトリガーするまで、最上位の祖先要素から開始されます。 js イベント キャプチャは通常、DOM2 イベント モデル
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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: HTMLページでよく使われるいくつかの小さなメソッド
Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...
7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...
目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...
私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...
Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...
目次1. バックグラウンドで実行されるジョブ2. 信号を使用してプロセスを制御する基本的なプロセス管...
この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...
イメージは、GitHub と同様に Docker パブリック リポジトリに直接簡単にプッシュできます...
プロジェクトがある程度複雑になると、必然的にロジックの再利用の問題に直面することになります。 Rea...
elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...
目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...
導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...
Ubuntu環境におけるPHP関連パスPHP パス /usr/bin/php phpize5 /us...
推薦する: Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル...
序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...