1. イベント ブラウザ クライアント アプリケーション プラットフォームでは、基本的な動作はイベント駆動型です。つまり、イベントが発生し、対応するアクションが実行されます。 ブラウザ イベントは、何かが起こったという信号を表します。イベントの詳細については、この記事の焦点ではありません。まだ理解していない人は、W3school チュートリアルにアクセスして、次の内容をより深く理解することができます。 2.バブルの仕組み バブリングとは? 下の写真を見てわかると思いますが、泡は水の底から始まり、深いところから浅いところまで上がっていきます。上昇する途中で、泡はさまざまな深さの水中を通過します。対応して、このバブルはここでのイベントに相当し、水は dom ツリー全体に相当します。イベントは dom ツリーの最下層から dom のルート ノードに渡されるまで渡されます。 簡単なケース分析 以下はバブリングの原理を示す簡単な例です: 3 つの単純な dom 要素を含む HTML を定義します: div1、div2、span、div2 には span が含まれ、div1 には div2 が含まれます。すべて本文の下にあります: "body"> "box1" class="box1"> ; "box2" class="box2"> "span"< code class="js plain">>これはスパンです。 < /div> インターフェイスのプロトタイプは次のとおりです: イベントの時刻とトリガー イベントノード情報: ? 1234 56 78 <code class="js string">"text/javascript"</code><code class ="js plain">></code></div> <div class="line number7 index6 alt2"> <code class="js space"> </code><code class="js plain">window.onload = </code><code class="jsキーワード">関数</code><code class="js plain"> () {</code> </div> <div class="line number8 index7 alt1"> <code class="js space"> </code><code class="js plain">ドキュメント。 getElementById(</code><code class="js string">"body"</code><code class="js plain">).addEventListener(</code><code class="js string">"click "</code><code class="js plain">,eventHandler) ;</code> </div> </td> <code class="js space"> </code><code class="js plain">}</code><td class="code"> <div class="container"> <code class="js space"> </code>function <code class="js plain">eventHandler(event) {</code><div class="line number1 index0 alt2"><code class="js plain"><script type=</code><code class="js string">"text/javascript"</code><code class="js plain">></code></div> <div class="line number2 index1 alt1"> <code class="js spaces"> </code><code class="js plain">window.onload = </code><code class="js keyword">function</code><code class="js plain">() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"body"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,eventHandler);</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">eventHandler(event) {</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces"> </code><code class="js plain">console.log(</code><code class="js string">"时间:"</code><code class="js plain">+</code><code class="js keyword">new</code> <code class="js plain">Date(event.timeStamp)+</code><code class="js string">" 产生事件的节点:"</code> <code class="js plain">+ event.target.id +</code><code class="js string">" 当前节点:"</code><code class="js plain">+event.currentTarget.id);</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js plain"> console.log("Time:"+new 日付(event.timeStamp)+" イベントを生成するノード: " +event.target.id +" 現在のノード: "+event.currentTarget.id); } script> 🎜🎜🎜🎜 「これはspan」、div2、div1、bodyをクリックすると、次の情報が出力されます。 ‐ ‐ out out off div の ‐ ‐ ‐ ‐‐ ‐ ‐ 作成予定です、 sub-element div2とスパンでこれらの要素がクリックされると、クリックイベントが生成され、ボディがキャプチャされ、対応するイベント処理関数を呼び出します。水の中の泡が下から上に上昇するのと同じように、出来事も上昇します。示 インシデント送信の概略図を以下に示します: 、インシデントの過程でいくつかの情報が存在します。これらはインシデントの一部です: インシデントの時間+インシデントの場所インシデント+イベントのタイプ+イベント+イベント 現在のプロセッサー + その他の情報、 完全な HTML コードは次のとおりです。 45 6 78 91011121314151617181920 2122232425 26272829303132333435 3637 38394041 424344454647 "UTF-8"> <code class="js string">"text/javascript"</code> <code class="js plain">src=</code><code class="js string">"js /jquery-1.11. 0.js?1.1.11"</code><code class="js plain">> < title>ここにタイトルを挿入< ;/title> <code class="js string">"text/css"</code><code class="js plain">></code></div> <div class="line number8 index7 alt1"><code class="js plain">.box1 {</code></div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code><code class="js plain">border: green 40px solid;</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces"> </code><code class="js plain">width: 300px;</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces"> </code><code class="js plain">height: 300px;</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces"> </code><code class="js plain">margin: auto;</code> </div> <div class="line number13 index12 alt2"><code class="js plain">}</code></div> <div class="line number14 index13 alt1"> </div> <div class="line number15 index14 alt2"><code class="js plain">.box2 {</code></div> <div class="line number16 index15 alt1"> <code class="js spaces"> </code><code class="js plain">border: yellow 40px solid;</code> </div> <div class="line number17 index16 alt2"> <code class="js spaces"> </code><code class="js plain">width: 220px;</code> </div> <div class="line number18 index17 alt1"> <code class="js spaces"> </code><code class="js plain">height: 220px;</code> </div> <div class="line number19 index18 alt2"> <code class="js spaces"> </code><code class="js plain">margin: auto;</code> </div> <div class="line number20 index19 alt1"><code class="js plain">}</code></div> <div class="line number21 index20 alt2"> </div> <div class="line number22 index21 alt1"><code class="js plain">span {</code></div> <div class="line number23 index22 alt2"> <code class="js spaces"> </code><code class="js plain">position: relative;</code> </div> <div class="line number24 index23 alt1"> <code class="js spaces"> </code><code class="js plain">left: 50px;</code> </div> <div class="line number25 index24 alt2"> <code class="js spaces"> </code><code class="js plain">top: 50px;</code> </div> <div class="line number26 index25 alt1"> <code class="js spaces"> </code><code class="js plain"></code> </div> <div class="line number27 index26 alt2"><code class="js plain">}</code></div> <div class="line number28 index27 alt1"><code class="js plain"> <code class="js string">"text/javascript"</code><code class="js plain">></code></div> <div class="line number31 index30 alt2"> <code class="js spaces"> </code><code class="js plain">window.onload = </code><code class="js keyword">function</code><code class="js plain">() {</code> </div> <div class="line number32 index31 alt1"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"body"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,eventHandler);</code> </div> <div class="line number33 index32 alt2"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number34 index33 alt1"> <code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">eventHandler(event) {</code> </div> <div class="line number35 index34 alt2"> <code class="js spaces"> </code><code class="js plain">console.log(</code><code class="js string">"时间:"</code><code class="js plain">+</code><code class="js keyword">new</code> <code class="js plain">Date(event.timeStamp)+</code><code class="js string">" 产生事件的节点:"</code> <code class="js plain">+ event.target.id +</code><code class="js string">" 当前节点:"</code><code class="js plain">+event.currentTarget.id);</code> </div> <div class="line number36 index35 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number37 index36 alt2"><code class="js plain"> "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 <code class="js string">"text/javascript"</ code><code class="js plain">></code><code class="js plain"><script type=</code><code class="js string">"text/javascript"</code><code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces"> </code><code class="js plain">window.onload = </code><code class="js keyword">function</code><code class="js plain">() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box1"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是最外层div。"</code><code class="js plain">);</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box2"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是第二层div。"</code><code class="js plain">);</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"span"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是span。"</code><code class="js plain">);</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number13 index12 alt2"><code class="js plain"> 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 34 5 6 7 8 9 10 11 12 13 14 15 16 <code class="js string">"text/javascript "</code><code class="js plain">></code><div class="line number15 index14 alt2"></div> <code class="js space"> </code><code class="js plain">window.onload = コード> コード><code class="js キーワード">関数</code><code class="js plain">() {</code><div class="line number16 index15 alt1"></div> <code class="js space"> </code>document.getElementById(</code><code class="js string">"box1"</code><code class="js plain">).addEventListener(</code>「クリック」<code class="js plain">,</code><code class="js キーワード">関数</code><code class="js plain "> (イベント){</code> </td> <td class="code"> <code class="js space"> </code><code class="js plain">alert(</code><code class="js string">"こんにちは、私は一番外側の div "</code><code class="js plain">);</code><div class="container"> <div class="line number1 index0 alt2"> <code class="js space"> </code><code class="js plain">event.stopPropagation();</code><code class="js plain"><script type=</code><code class="js string">"text/javascript"</code><code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces"> </code><code class="js plain">window.onload = </code><code class="js keyword">function</code><code class="js plain">() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box1"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是最外层div。"</code><code class="js plain">);</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces"> </code><code class="js plain">event.stopPropagation();</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box2"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是第二层div。"</code><code class="js plain">);</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code><code class="js plain">event.stopPropagation();</code> </div> <code class="js space"> </code><code class="js plain">});</code>🎜🎜<code class=" js スペース"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box2"</code><code class="js plain"> ).addEventListener(</code><code class="js string">"クリック"</code><code class="js plain">,</code><code class="js キーワード">関数 code><code class="js plain">(event){</code>🎜🎜<code class="js space"> </code><code class="js plain">alert(</code>"こんにちは、これは div の 2 番目の層です。 "</code><code class="js plain">);</code>🎜🎜<code class="js space"> </code><code class="js plain">event.stopPropagation(); </code>🎜<div class="line number10 index9 alt1"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"span"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是span。"</code><code class="js plain">);</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces"> </code><code class="js plain">event.stopPropagation();</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number16 index15 alt1"><code class="js plain"> このようなコードの後で、さまざまな要素をクリックするとさまざまなプロンプトが表示され、複数のボックスはポップアップしません。 方法 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 <スクリプトタイプ= code>"text/javascript"> window.onload = 関数() {<code class="js string">"text/javascript"</code><code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces"> </code><code class="js plain">window.onload = </code><code class="js keyword">function</code><code class="js plain">() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box1"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(event.target == event.currentTarget)</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces"> </code><code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是最外层div。"</code><code class="js plain">);</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"box2"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(event.target == event.currentTarget)</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces"> </code><code class="js plain">{</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是第二层div。"</code><code class="js plain">);</code> </div> <code class="js plain">document.getElementById(</code><code class="js string">"box1"</code><code class=" js plain">).addEventListener(</code><code class="js string">"クリック"</code><code class="js plain">,</code><code class="js キーワード">関数</code><code class="js plain">(event){</code>🎜🎜<code class="js space"> </code><code class="js keyword">if code> code><code class="js plain">(event.target ==event.currentTarget)</code>🎜🎜<code class="js space"> </code><code class="js plain">{ </code>🎜🎜<code class="js space"> </code><code class="js plain">alert(</code><code class="js string">"こんにちは、私はアウターディビジョン"</code><code class="js plain">);</code>🎜🎜<code class="js space"> </code><code class="js plain">}</code>🎜 🎜<code class="js space"> </code><code class="js plain">});</code>🎜🎜<code class="js space"> </code><code class=" js plain">document.getElementById(</code><code class="js string">"box2"</code><code class="js plain">).addEventListener(</code><code class=" js 文字列">"クリック"</code><code class="js plain">,</code><code class="js キーワード">関数</code><code class="js plain">(event ){</code>🎜🎜<code class="js space"> </code><code class="jsKeyword">if</code><code class="js plain">(event.target == event.currentTarget)</code>🎜🎜<code class="js space"> </code><code class="js plain">{</code>🎜🎜<code class="js space"> code> code><code class="js plain">alert(</code><code class="js string">"こんにちは、これは div の 2 番目の層です。"</code><code class="jsプレーン">);</code>🎜<div class="line number13 index12 alt2"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"span"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(event){</code> </div> <div class="line number16 index15 alt1"> <code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(event.target == event.currentTarget)</code> </div> <div class="line number17 index16 alt2"> <code class="js spaces"> </code><code class="js plain">{</code> </div> <div class="line number18 index17 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是span。"</code><code class="js plain">);</code> </div> <div class="line number19 index18 alt2"> <code class="js spaces"> </code> </div> <div class="line number20 index19 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number21 index20 alt2"> <code class="js spaces"> </code><code class="js plain">});</code> </div> <div class="line number22 index21 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number23 index22 alt2"><code class="js plain"> イベント配信の観点から: 方法 1 は、イベントのバブリングをキャンセルすることです。つまり、一部のノードがバブリングをキャンセルすると、イベントは再度配信されなくなります。方法 2 は、バブリングを妨げず、必要なイベントをフィルタリングすることです。イベントは処理された後も配信され続けます。 利点と欠点: 方法 1 の欠点: 特定の要素をクリックして対応する情報を表示するには、方法 1 では各要素の子要素が必要です。つまり、他の要素と機能的に強く関連しているため、このメソッドは非常に脆弱になります。たとえば、span 要素の処理関数がバブリング終了を実行しない場合、イベントは div2 に送信され、div2 に対するプロンプト メッセージが表示されます。各要素のイベント処理ロジックは非常に似ています。つまり、if (event.target ==event.currentTarget) の判定があり、多くのコード冗長性が生じますが、要素が 3 つある場合は問題ありません。 10 を超えています。何百もあります。どうすればよいですか? また、要素ごとに処理関数があり、ロジックとコードの複雑さがある程度増加します。メソッド 2 を再度分析しましょう。メソッド 2 の原理は、要素がインシデントを受け取った後、そのイベントが要件を満たしているかどうかを判断し、対応する処理を実行します。その後、イベントはバブルを続けて無視します。 ; 親ノードはイベントを均一に処理し、イベントが発生した場所 (つまり、イベントが発生したノード) を特定し、それに応じて処理できますか?答えは「はい」です。イベント リスナーを body 要素に追加し、event.target を判断して、ターゲットごとに異なる動作を生成します。 メソッド 2 のコードをリファクタリングします: ? 123 456 7 8910 111213141516171819 < ;script type=コード>"text/javascript"> window.onload = 関数() { document.getElementById("body").addEventListener("click",eventPerformed); }<code class="js string">"text/javascript"</code><code class="js plain">></code></div> <div class="line number2 index1 alt1"> <code class="js spaces"> </code><code class="js plain">window.onload = </code><code class="js keyword">function</code><code class="js plain">() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces"> </code><code class="js plain">document.getElementById(</code><code class="js string">"body"</code><code class="js plain">).addEventListener(</code><code class="js string">"click"</code><code class="js plain">,eventPerformed);</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">eventPerformed(event) {</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">target = event.target;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces"> </code><code class="js keyword">switch</code> <code class="js plain">(target.id) {</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces"> </code><code class="js keyword">case</code> <code class="js string">"span"</code><code class="js plain">: </code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是span。"</code><code class="js plain">);</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces"> </code><code class="js keyword">break</code><code class="js plain">;</code><code class="js space"> </code><code class="js キーワード">関数 code> <code class="js plain">eventPerformed(event) {</code></code> </div>🎜<code class="js space"> </code><code class="jsKeyword">var</code> target =event.target;🎜🎜<code class="js space"> </code><code class="jsKeyword">スイッチ</code> <code class=" js plain">(target.id) {</code>🎜🎜<code class="js space"> </code><code class="js keyword">case</code> <code class=" js string ">"スパン"</code><code class="js plain">: </code>🎜🎜<code class="js space"> </code><code class="js plain">アラート (<code class="js string">"こんにちは、スパンです。 "</code><code class="js plain">);</code>🎜🎜<code class="js space"> </code><code class="js keyword">break</code>;</code>🎜<div class="line number11 index10 alt2"> <code class="js spaces"> </code><code class="js keyword">case</code> <code class="js string">"div1"</code><code class="js plain">:</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是第二层div。"</code><code class="js plain">);</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces"> </code><code class="js keyword">break</code><code class="js plain">;</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces"> </code><code class="js keyword">case</code> <code class="js string">"div2"</code><code class="js plain">:</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces"> </code><code class="js plain">alert(</code><code class="js string">"您好,我是最外层div。"</code><code class="js plain">);</code> </div> <div class="line number16 index15 alt1"> <code class="js spaces"> </code><code class="js keyword">break</code><code class="js plain">;</code> </div> <div class="line number17 index16 alt2"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number18 index17 alt1"> <code class="js spaces"> </code><code class="js plain">}</code> </div> <div class="line number19 index18 alt2"><code class="js plain"> その結果、別の要素をクリックすると、一致するプロンプトのみがポップアップ表示され、冗長なプロンプトは表示されません。上記のメソッドを通じて、祖父ノードの Body 要素を完成させるために必要な処理関数を渡し、対応するロジックを自分で実装しないようにしたのがこのモデルです。 -イベント委任と呼ばれます。 以下は図です。