события пузыря и структура html/dom?

Question

Рассмотрим этот 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 
       +----+ 

что означает пузырь событие с до (как они говорят - снизу вверх).

Вопрос:

Я знаю, что дом дерево устроен как мой рисунок (в виде дерева), но делает HTML «дерево» расположен на противоположном направлении (Отразить по вертикали)? потому что я вижу много примеров, который показывает башню строится снизу вверх:

Я имею в виду:

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

Но здесь, пузыриться событие - должно быть пузырь «вниз» becuase, как мы видели, кнопка запускает первый ...

Answer 1

делает HTML «дерево» расположен на противоположном направлении (Отразить по вертикали)? потому что я вижу много примеров, которые показывают, что башня построена снизу вверх

Это дерево DOM, а не башня DOM. В информатике конвенция состоит в том, чтобы нарисовать trees с их корнем в верхней части и их листами внизу.

Термины «вверх» и «вниз» имеют больше смысла, если вы думаете о DOM как , вложенном (который он действительно есть) вместо того, чтобы просто быть подключенным в определенном направлении. Затем вы погрузитесь вниз в более подробные структуры, и пузырь обратно до к самым внешним слоям.

Для окончательного ответа прочитайте Event dispatch and DOM event flow chapter в спецификации W3.

Answer 2

это просто называется event bubbling или event propagation, направление не имеет никакого значения ...

Но его часто называют bubble up, потому что они представляют собой дерево следующим образом:

• документ
  • ДИВ
  • стол
    • тр
      • тд
        • кнопка
  • р
  • ДИВ
    • р
      • пядь

и, таким образом, как это, это пузыри 'вверх' снова .... до он достигает корня.

Обратите внимание, как представление дерева следует за тем, как вы на самом деле пишете структуру HTML.

Answer 3

Веб-браузеры не имеют механизмов взаимного равновесия и поэтому совершенно не осведомлены о понятиях «вверх» и «вниз». Является ли древовидная структура проиллюстрированной как расширение вверх на странице (или экране) или вниз, является просто вопросом удобства для поддержки какой-либо идеи.

Мы думаем о «пузырях», вероятно, потому, что мы также думаем о «глубине» узлов DOM в дереве. Если дочерний узел, подобный вашей кнопке, находится на определенной глубине, то его цепочка родителей находится на меньшей глубине. Поскольку событие передается обработчикам событий на уменьшающихся глубинах, ну, это напоминает восхождение от глубокой воды до мелкой, как пузыри.

Опять же, что понятие «глубина» - это просто разговорная мнемоника, которая поможет нам сохранить структуру DOM в наших головах. Изоморфное множество терминов будет работать так же хорошо, как только мы все привыкнем к ним. Например, если бы у нас было распространенное слово на английском языке, когда опыт белой белки, падающей из дерева, натыкался на ветви по дороге, мы могли бы использовать это вместо «пузыря» (предполагая, что мы можем справиться с насильственными образами ушибленные белки ребенка).

Answer 4

Событие сначала идет down Дерево во время фазы захвата, затем пузырь вверх. Вы можете перехватить их во время захвата со следующим, который оповещает «т» первым:

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).

Answer 5

Именно так называется метод. Это в основном концептуально, и вообще не имеет значения, как работает этот метод.

Например, если вы берете какую-либо иерархическую структуру, у вас всегда будет база или родительские узлы в верхней части структуры. (Подумайте о файловых структурах, деревьях предков.)

Итак, если вы хотите, чтобы событие передавалось родительскому узлу в иерархии, вы будете иметь (концептуально) движение вверх.

(Это не имеет значения, хотя на самом деле, как вы себе иерархию.)