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トリガーの考え方の詳細な説明
最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...
1.サービスコマンドサービスコマンドは実際には/etc/init.dディレクトリに移動し、関連プログ...
脆弱性の紹介SigRed の脆弱性はワーム化可能であるため非常に危険です。つまり、ユーザーの介入なし...
このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...
MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...
MQTT の紹介MQTT (Message Queuing Telemetry Transport)...
目次1. 説明2. 関連する依存パッケージをダウンロードする3. 設定ファイル .eslintrc....
入力ボックス内のカーソルのサイズが一定ではありませんIE7とChromeの違いは非常に明白ですまず、...
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
この記事では主に、MySQL の Aborted アラームに関する関連コンテンツを紹介し、参考と学習...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...
来学期にMySQLを勉強します。事前に自宅で練習していませんでした。インストールに時間がかかるとは思...
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...
目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...
序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...