4

この html を考えてみましょう:

   <table>
      <tr>
        <td>
         <input type="button"/>
        </td>
      </tr>
    </table>

そして、このjsコード：

$(":button").click(function (){alert('b')});
$("table").click(function (){alert('t')});

これによりアラートが表示さbれ、次に t. ボタンを押して、イベントをテーブルにバブルアップしたためです。

したがって、一連のイベントによると、html ツリーは次のようになります。

+-------------------------------+
|                               | //table   
+------+------------------+-----+
       |                  |  //tr 
       +------------------+
            |        |   //td
            +--------+
              |    |    //button
              +----+

これは、イベントがバブルアップすることを意味します(彼らが言うように、下から上へ)。

質問 ：

domツリーが私の絵のように（ツリーとして）配置されていることは知っていますが、htmlの「ツリー」は反対方向（垂直に反転）に配置されていますか？タワーが下から上に構築されていることを示す多くの例を見ているためです。

つまり ：

     _        //button
   _____      //td
  ________    // tr
_____________ //table

しかし、ここでは、バブル アップ イベント - バブルを「ダウン」にする必要があります。

4

5 に答える 5

3

HTMLの「ツリー」は反対方向に配置されていますか（垂直に反転）？タワーが下から上に構築されていることを示す多くの例を目にするので

これは DOM タワーではなく、DOM ツリーです。コンピューター サイエンスでは、根を上に、葉を下にして木を描くのが慣習です。

「上」と「下」という用語は、DOMが単に何らかの方向に接続されているのではなく、入れ子になっている (実際にそうである) と考えると、より意味があります。次に、より詳細な構造に飛び込み、最も外側の層に戻ります。

決定的な答えについては、W3 仕様のイベント ディスパッチと DOM イベント フローの章を参照してください。

于 2013-08-06T15:13:48.493 に答える
1

イベントは、最初にキャプチャ フェーズ中にツリーを下っていき、次にバブルアップします。最初に「t」を警告する次の方法で、キャプチャ中にそれらを傍受できます。

var btn = document.getElementById('btn');
var tbl = document.getElementById('tbl');

btn.addEventListener('click', function(){
    alert('b')
}, true);

tbl.addEventListener('click', function(){
    alert('t')
}, true);

http://jsfiddle.net/ajx8q/

ここで「上」と「下」と言っていますが、それらは単なる慣例であることに注意してください（Pointyの回答を参照）。

于 2013-08-06T14:39:55.760 に答える
1

メソッドの名前の付け方です。とにかく、それはほとんど概念的なものであり、メソッドが実際にどのように機能するかはまったく問題ではありません。

たとえば、階層構造を採用する場合、常に構造の最上位にベース ノードまたは親ノードがあります。(ファイル構造、祖先ツリーを考えてみてください..)

したがって、イベントを階層内の親ノードに伝播する場合は、(概念的に) 上に移動します。

(階層をどのように視覚化するかは問題ではありません。)

于 2013-08-06T14:40:05.260 に答える