3

document.getElementById('a').addEventListener('click', function(e){
  alert('1');
}, true);

document.getElementById('b').addEventListener('click', function(){
  alert('2');
}, false);

document.getElementById('b').addEventListener('click', function(){
  alert('4');
}, true);
<div id="a">
  <div id="b">Click me</div>
</div>

Почему события срабатывают в последовательности 1,2,4 а не 1,4.2? Ведь, согласно документации, события обрабатываются сначала все с параметром true, а затем false.

5
  • а ссылку на эту документацию можно посмотреть?
    – MasterAlex
    6 сен 2016 в 11:22
  • w3.org/TR/DOM-Level-3-Events
    – ruslik
    6 сен 2016 в 11:23
  • Причем последовательность получается нужной если обработчики у элемента b поменять местами
    – ruslik
    6 сен 2016 в 11:24
  • Получается еще имеет место быть последовательность регистрации событий
    – ruslik
    6 сен 2016 в 11:26
  • если на элементе несколько обработчиков, запускается первая зарегистрированная, поправьте если я не прав
    – ruslik
    6 сен 2016 в 11:28

1 ответ 1

3

Согласно все той же документации, обработчики этапа capture вызываются в порядке от родительских элементов к дочерним, а обработчики этапа bubble - от дочерних к родительским (см. раздел 3.1)

Там же написано, что при достижении элемента, в котором событие возникло непосредственно - этап capture заканчивается и начинается этап target.

Таким образом, непосредственные обработчики вызываются вне зависимости от параметра useCapture.

4
  • Вопрос был в том, почему на одном элементе, на котором зарегистрированы 2 события, но с разными параметрами, сначала срабатывает событие bubling, а только потом capture - ведь по рисунку видно что первым должно отработать событие capture
    – ruslik
    6 сен 2016 в 12:12
  • @ruslik понял, сейчас добавлю 6 сен 2016 в 12:41
  • Таким образом, непосредственные обработчики вызываются вне зависимости от параметра useCapture - то есть в порядке их регистрации, я правильно понял?
    – ruslik
    6 сен 2016 в 12:54
  • @ruslik да, вы правильно поняли 6 сен 2016 в 12:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.