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)運用実績:赤い部分をクリックしてください: 紫色の領域をクリックします。 緑色の領域をクリックします: イベント攻略ゲット!!! 知らせ:
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 では、 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明
>>: バックアップと削除のためにリアルタイムでステートメントを検出するMySQLトリガーの考え方の詳細な説明
1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...
TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...
目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...
COALESCE は、各パラメータ式 (expression_1、expression_2、...、...
目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...
入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...
序文:私は仕事柄、オンラインライブストリーミングの分野に携わっており、ビデオの再生やダウンロードには...
問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...
1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...
効果画像: html: <div class='site_bar'>ホー...
セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...
1. vertical-align プロパティは次の効果を実現します。 vertical-alig...
1. ffmpeg がビデオ ファイルをプッシュする場合、オーディオとビデオのエンコード形式は H2...