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 规范中的Event dispatch and DOM event flow一章。

于 2013-08-06T15:13:48.493 回答
2

Web 浏览器没有耳廓平衡机制，因此完全不知道“上”和“下”的概念。将树结构图示为在页面（或屏幕）上向上扩展还是向下扩展纯粹是为了方便支持某些想法。

我们想到“冒泡”可能是因为我们还想到了树中 DOM 节点的“深度”。如果像您的按钮这样的子节点处于特定深度，则其父节点链的深度较小。当一个事件以递减的深度传递给事件处理程序时，这让人想起从深水上升到浅水，就像气泡一样。

然而，再一次，“深度”的概念只是一个口语助记符，可以帮助我们在头脑中保持 DOM 的结构清晰。一旦我们都习惯了一组同构的术语，它们也会同样有效。例如，如果我们在英语中有一个常用词来形容一只小松鼠从树上滚下来，途中撞到树枝，我们可以用它来代替“泡泡”（假设我们可以处理受伤的小松鼠）。

于 2013-08-06T14:37:07.357 回答
2

它只是被称为event bubblingor event propagation，方向并不重要......

但它经常被调用bubble up，因为它们以下列方式表示树：

  • 文档
    • div
    • 桌子
      • tr
        • 时间
          • 按钮
    • p
    • div
      • p
        • 跨度

就这样，它再次“冒泡”……直到它到达根部。

请注意树表示如何遵循您实际编写 HTML 结构本身的方式。

于 2013-08-06T14:36:42.950 回答
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 回答