冒泡事件和html/dom結構？

考慮這個網站：冒泡事件和html/dom結構？

<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

但在這裏，冒泡事件 - 應該是泡沫「下」監守正如我們看到的，按鈕首先運行...

來源

2013-08-06 Royi Namir

你從哪裏看到倒立的樹？事件冒泡*上升*。例如 – bfavaretto

@bfavaretto（http://ils.indiana.edu/faculty/hrosenba/www/Workshops/CSS/Demo/cssstructure.html）和這裏（http://www.phpeveryday.com/articles/jQuery- Event-Object-P957.html）我可以給出1000多 –

我在該鏈接中看到嵌套框，它們看起來像一棵常規樹。 – bfavaretto

並在html「樹」佈置在相反的方向（垂直翻轉）？因爲我看到很多示例顯示從底部到頂部構建的塔樓

這是一個DOM樹，而不是DOM塔。在計算機科學中，約定是繪製trees，它們的根在頂部，葉子在底部。

如果您認爲DOM爲嵌套（它確實是）而不是僅在某個方向連接，則術語「上」和「下」更有意義。然後，您將潛水下降到更詳細的結構，並將向上泡沫到最外層。

要得到明確答案，請閱讀W3規範中的Event dispatch and DOM event flow chapter。

來源

2013-08-06 15:13:48 Bergi

Bergi - 當我在我的問題中提到：「dom tree」時，我提到了差異。但讓我感到困惑的東西就是我在很多網站上看到的html「塔」 - 這讓我對泡沫術語感到困惑。 –

[這些圖形]（http://javascript.info/tutorial/bubbling-and-capturing）不顯示塔，而是倒金字塔。像[這一個]（http://ils.indiana.edu/faculty/hrosenba/www/Workshops/CSS/Demo/cssstructure.html）這是非常混亂（如果沒有錯的話），以顯示他們的父母以外的框。在[那篇文章]（http://www.phpeveryday.com/articles/jQuery-Event-Object-P957.html）中，它們正確嵌套。 – Bergi

它只是叫event bubbling或event propagation，方向其實並不重要...

但它通常被稱爲bubble up因爲它們代表通過以下方式樹：

文件
- DIV
- 表
  - TR
    - TD
      - 按鈕
- p
- DIV
  - p
    - 跨度

，因此這樣的，它的氣泡 '向上' 再次....直到它到達根部。

請注意樹形表示如何遵循實際編寫HTML結構本身的方式。

來源

2013-08-06 14:36:42 NDM

bubble（對我來說）意味着up –

@RoyiNamir對。這很重要，因爲這就是你的問題所在。無論如何，我不會認真對待印第安納大學的網站。只要堅持你最初的想法。 –

@MrLister我沒有。此外，只搜索谷歌圖像的事件泡沫。（我接過這個鏈接是因爲它有很好的可視化效果，還有谷歌圖片搜索） –

網頁瀏覽器沒有耳廓平衡機制，因此完全不瞭解「上」和「下」的概念。無論是在頁面（或屏幕）上向上擴展樹形結構還是向下擴展純粹是支持某種想法的方便問題。

我們想到「冒泡」可能是因爲我們還想到了樹中DOM節點的「深度」。如果像你的按鈕這樣的子節點處於特定的深度，那麼它的父母鏈的深度就會減小。隨着事件交給事件處理程序，深度越來越小，這就好像從深水上升到淺層，就像氣泡一樣。

但是，「深度」這個概念只是一種口語助記符，可以幫助我們在頭腦中保持DOM的結構清晰。一旦我們都習慣了它們，一組同構的術語也會起作用。例如，如果我們在英語中有一個常見的詞語，表示嬰兒松鼠從樹上倒下，在途中碰到樹枝，我們可以使用它而不是「泡泡」（假設我們可以處理暴力圖像挫傷的小松鼠）。

來源

2013-08-06 14:37:07 Pointy

那麼，「事件聽衆」是一種助聽器嗎？ – bfavaretto

@bfavaretto我更喜歡親自將「事件聽衆」當作「貓須」 – Pointy

這是一個很好的比喻！ – bfavaretto

事件第一次去下降樹在捕獲階段，然後冒泡向上。你可以用下面的，它提醒「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's answer ）。

來源

2013-08-06 14:39:55 bfavaretto

這只是如何命名的方法。無論如何，這絕大部分都是概念上的，並且完全不關心這個方法是如何運作的。例如，如果採取任何層次結構，則始終在結構頂部具有基礎節點或父節點。（想想文件結構，血統樹..）

所以，如果你想要一個事件傳播給層次結構中的父節點，你會有它（概念上）向上移動。

（不要緊，但實際上你如何想像你的層次結構。）

來源

2013-08-06 14:40:05 Layke

冒泡事件和html/dom結構？

回答

相關問題