Порядок срабатывания событий

[DrStrangelove]

В этой статье сказано:

Примечательно, что на одно событие может реагировать не только тот элемент, на котором произошло событие, но и элементы над ним.

Это очень удобно, например если в элементе содержатся много дочерних HTML-тегов - не обязательно ставить обработчик на каждый, достаточно указать один обработчик на родителе и в нем ловить все события.


Но в примерах, обработчики вешаются на все (и вложенные) элементы!
Как бы выглядел код, чтобы один обработчик на родителе ловил все события??

[Sweet]

Пример некроссбраузерный, но мысль понять можно.

<div id="test">
  <span>Click: 0</span>
  <span>Click: 0</span>
</div>
<script>
document.getElementById("test").onclick = function(event){
  if( event.target.tagName.toLowerCase() === "span" )
    event.target.innerHTML = "Click: " +
      ( + event.target.innerHTML.match(/\d+$/)[ 0 ] + 1 );
};
</script>

[DrStrangelove]

<div id="test">
  <span>Click: 0</span>
  <span>Click: 0</span>
</div>
<script>
document.getElementById("test").onclick = function(event){
  if( event.target.tagName.toLowerCase() === "span" )
    event.target.innerHTML = "Click: " +
      ( + event.target.innerHTML.match(/\d+$/)[ 0 ] + 1 );
};
</script>

т.е. тут всплытие?? Не перехват??
Почему event.target - span?? Ведь мы повесили обработчик на div??

[Sweet]

т.е. тут всплытие?? Не перехват??
Почему event.target - span?? Ведь мы повесили обработчик на div??

Идет всплывание события от элемента, на котором это событие произошло. Этот элемент будет хранится в свойстве .target (или .srcElement в ie) объекта event для всех элементов (они доступны через this), на которых произойдет событие в ходу всплывания.

<div id="div">
  <span id="span">Click</span>
</div>
<script>
document.getElementById("div").onclick = function(event){
  alert([
    this === document.getElementById("div"),
    event.target === document.getElementById("span")
  ]);
};
</script>

[DrStrangelove]

А если такой код:

<div>
    <div>
          <div onclick="handler()">

          </div>
    </div>
</div>

Как он выполнится?? Обработчик только у самого внутреннего - Он выполнится трижды??

[dmitriymar]

Как он выполнится?? Обработчик только у самого внутреннего - Он выполнится трижды??

событие возникнет 4 раза(ещё и в боди))) ,но обработчик всего один- выполнится 1 раз.

[DrStrangelove]

событие возникнет 4 раза(ещё и в боди))) ,но обработчик всего один- выполнится 1 раз.

1)А если как в первом примере - один единственный обработчик висит на родителе, внутри которого много потомков. Тогда тоже обработчик выполнится только один раз (но, наверно, с разными event.target)??

Это просто потому что обработчик всего один??

2) событие возникнет 4 раза(ещё и в боди))) А не 5?? )) на корневой элемент HTML всплытие не распространяется??