JavaScriptイベントバブリングは私・画像とテキストの例

1. イベント

ブラウザ クライアント アプリケーション プラットフォームでは、基本的な動作はイベント駆動型です。つまり、イベントが発生し、対応するアクションが実行されます。

ブラウザ イベントは、何かが起こったという信号を表します。イベントの詳細については、この記事の焦点ではありません。まだ理解していない人は、W3school チュートリアルにアクセスして、次の内容をより深く理解することができます。

2.バブルの仕組み

バブリングとは？

下の写真を見てわかると思いますが、泡は水の底から始まり、深いところから浅いところまで上がっていきます。上昇する途中で、泡はさまざまな深さの水中を通過します。対応して、このバブルはここでのイベントに相当し、水は dom ツリー全体に相当します。イベントは dom ツリーの最下層から dom のルート ノードに渡されるまで渡されます。

簡単なケース分析

以下はバブリングの原理を示す簡単な例です: 3 つの単純な dom 要素を含む HTML を定義します: div1、div2、span、div2 には span が含まれ、div1 には div2 が含まれます。すべて本文の下にあります:

"body" >

"box1" class= "box1" &gt ; "box2" class= "box2" > "span" >これはスパンです。 インターフェイスのプロトタイプは次のとおりです: イベントの時刻とトリガー イベントノード情報:

?

1 2 3 4 5 6 7 8 "text/javascript" > window.onload = 関数 () { ドキュメント。 getElementById( "body" ).addEventListener( "click " ,eventHandler) ; } function eventHandler(event) { "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } console.log( "Time:" + new 日付(event.timeStamp)+ " イベントを生成するノード: " +event.target.id + " 現在のノード: " +event.currentTarget.id); } 🎜🎜🎜🎜 「これはspan」、div2、div1、bodyをクリックすると、次の情報が出力されます。 ‐ ‐ out out off div の ‐ ‐ ‐ ‐‐ ‐ ‐ 作成予定です、

sub-element div2とスパンでこれらの要素がクリックされると、クリックイベントが生成され、ボディがキャプチャされ、対応するイベント処理関数を呼び出します。水の中の泡が下から上に上昇するのと同じように、出来事も上昇します。示 インシデント送信の概略図を以下に示します:

、インシデントの過程でいくつかの情報が存在します。これらはインシデントの一部です: インシデントの時間+インシデントの場所インシデント+イベントのタイプ+イベント+イベント 現在のプロセッサー + その他の情報、

完全な HTML コードは次のとおりです。

4 5

6

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 "UTF-8" > "text/javascript" src= "js /jquery-1.11. 0.js?1.1.11" > ここにタイトルを挿入&lt ;/title> "text/css" > .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; } "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. b. イベントバブリングを終了します

ここで、div1 がクリックされると、「Hello, I am the biggest div.」が表示されるような関数を実装したいと思います。 「こんにちは、私は 2 番目のレイヤーの div です」が表示されます。span をクリックすると、「こんにちは、私はスパンです」と表示されます。

これから、次の JavaScript スニペットが作成されます:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二层div。" ); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); }); } window.onload = 関数 () { document.getElementById( "box1" ).addEventListener( "click" , 関数 (イベント) { alert( "こんにちは、私は The一番外側の div. " ); 🎜 } ); 🎜🎜 document.getElementById( "box2" code> ).addEventListener( "クリック" , 関数 (イベント){ 🎜🎜 alert( "こんにちは、これは div の 2 番目の層です。 " ); 🎜🎜 }); 🎜🎜 document.getElementById( "span" ).addEventListener( "クリック" , 関数 (event){ 🎜🎜 alert( "こんにちは、スパンです。" ); 🎜🎜 }); 🎜🎜 } 🎜🎜 🎜🎜🎜🎜🎜🎜 上記のコードがspanをクリックすると、「こんにちは、私はspanです。」というポップアップボックスが表示されます:

このダイアログボックスで、「OK」をクリックすると、次のダイアログボックスが順番にポップアップします：

。 私たちが望んでいるのは、誰がクリックしても誰の情報が表示されるかということです。なぜ上記のような状況が起こるのでしょうか？ その理由は、span をクリックすると、span が親ノードとして生成されたイベントをバブルアップし、祖父母ノードとして div1 もこのイベントを受信するため、イベントに応答して応答を実行します。 。 関数。問題は判明しましたが、どのように解決すればよいでしょうか?

方法 1: より鮮明な状況を考えてみましょう。水の中の泡が下から上がってきています。あなたは今水の中にいて、その泡が上に上がってほしくありません。どうすればよいでしょうか。 ――刺す！泡がなければ当然泡立ちません。同様に、特定のノードについて、今処理しているイベントが不要な場合は、バブリングを終了できます: 対応する処理関数に、event.stopPropagation () を追加し、ブロードキャストをブロードキャストしているインシデントのブロードキャストを終了します。イベントがこのノードに留まり、分散しないように分散します。上記のスクリプト部分を変更します:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 "text/javascript " > window.onload = コード> コード> 関数 () { document.getElementById( "box1" ).addEventListener( 「クリック」 , 関数 (イベント){ alert( "こんにちは、私は一番外側の div " ); event.stopPropagation(); "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); event.stopPropagation(); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二层div。" ); event.stopPropagation(); }); 🎜🎜 document.getElementById( "box2" ).addEventListener( "クリック" , 関数 code> (event){ 🎜🎜 alert( "こんにちは、これは div の 2 番目の層です。 " ); 🎜🎜 event.stopPropagation(); 🎜 }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); event.stopPropagation(); }); } このようなコードの後で、さまざまな要素をクリックするとさまざまなプロンプトが表示され、複数のボックスはポップアップしません。

方法 2: イベントには、最初にイベントをトリガーしたノードへの参照と、現在イベントを処理しているノードへの参照が含まれています。ノードが自分自身によってトリガーされたイベントのみを処理する場合、自分自身によって生成されていないイベントは処理されません。 。 event.target はこのイベント オブジェクトを生成した DOM ノードを参照し、event.currrentTarget は現在の処理ノードを参照します。2 つのターゲットが等しいかどうかを確認できます。たとえば、SPAN がイベントをクリックすると、event.target が span 要素を指します。このとき、event.currenttarget は、span 要素を指します。処理関数が実行されます。イベントが div2 に渡されると、event.currentTarget は div2 になります。このとき、両者は等しくない、つまり、イベントが div2 自身によって生成されたものではないと判断され、応答処理ロジックは実行されません。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 "text/javascript" > window.onload = 関数 () { "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是最外层div。" ); } }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是第二层div。" ); document.getElementById( "box1" ).addEventListener( "クリック" , 関数 (event){ 🎜🎜 if code> code> (event.target ==event.currentTarget) 🎜🎜 { 🎜🎜 alert( "こんにちは、私はアウターディビジョン" ); 🎜🎜 } 🎜 🎜 }); 🎜🎜 document.getElementById( "box2" ).addEventListener( "クリック" , 関数 (event ){ 🎜🎜 if (event.target == event.currentTarget) 🎜🎜 { 🎜🎜 code> code> alert( "こんにちは、これは div の 2 番目の層です。" ); 🎜 } }); document.getElementById( "span" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是span。" ); } }); } イベント配信の観点から: 方法 1 は、イベントのバブリングをキャンセルすることです。つまり、一部のノードがバブリングをキャンセルすると、イベントは再度配信されなくなります。方法 2 は、バブリングを妨げず、必要なイベントをフィルタリングすることです。イベントは処理された後も配信され続けます。

利点と欠点:

方法 1 の欠点: 特定の要素をクリックして対応する情報を表示するには、方法 1 では各要素の子要素が必要です。つまり、他の要素と機能的に強く関連しているため、このメソッドは非常に脆弱になります。たとえば、span 要素の処理関数がバブリング終了を実行しない場合、イベントは div2 に送信され、div2 に対するプロンプト メッセージが表示されます。各要素のイベント処理ロジックは非常に似ています。つまり、if (event.target ==event.currentTarget) の判定があり、多くのコード冗長性が生じますが、要素が 3 つある場合は問題ありません。 10 を超えています。何百もあります。どうすればよいですか?

また、要素ごとに処理関数があり、ロジックとコードの複雑さがある程度増加します。メソッド 2 を再度分析しましょう。メソッド 2 の原理は、要素がインシデントを受け取った後、そのイベントが要件を満たしているかどうかを判断し、対応する処理を実行します。その後、イベントはバブルを続けて無視します。 ; 親ノードはイベントを均一に処理し、イベントが発生した場所 (つまり、イベントが発生したノード) を特定し、それに応じて処理できますか?答えは「はい」です。イベント リスナーを body 要素に追加し、event.target を判断して、ターゲットごとに異なる動作を生成します。

メソッド 2 のコードをリファクタリングします:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 &lt ;script type=コード>"text/javascript" > window.onload = 関数 () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } function eventPerformed(event) { var target = event.target; switch (target.id) { case "span" : alert( "您好，我是span。" ); break ; 関数 code> eventPerformed(event) { 🎜 var target =event.target;🎜🎜 スイッチ (target.id) { 🎜🎜 case "スパン" : 🎜🎜 アラート ( "こんにちは、スパンです。 " ); 🎜🎜 break ; 🎜 case "div1" : alert( "您好，我是第二层div。" ); break ; case "div2" : alert( "您好，我是最外层div。" ); break ; } } その結果、別の要素をクリックすると、一致するプロンプトのみがポップアップ表示され、冗長なプロンプトは表示されません。上記のメソッドを通じて、祖父ノードの Body 要素を完成させるために必要な処理関数を渡し、対応するロジックを自分で実装しないようにしたのがこのモデルです。 -イベント委任と呼ばれます。

以下は図です。

JavaScriptイベントバブリングは私・画像とテキストの例

関連記事