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>

Why events trigger in the sequence 1,2,4 and not 1,4.2? After all, according to the documentation, events are processed first with the parameter true, and then false.

  • And the link to this documentation can be viewed? - MasterAlex
  • w3.org/TR/DOM-Level-3-Events - ruslik
  • Moreover, the sequence is obtained if the handlers for the element b are interchanged - ruslik
  • It turns out there is still a place to be a sequence of event registration - ruslik
  • if there are several handlers on the element, the first registered one is launched, correct if I'm wrong - ruslik

1 answer 1

According to the same documentation, the capture stage handlers are called in order from parent to child elements, and the bubble stage handlers from child to parent (see section 3.1 )

It also says that when an element is reached in which the event occurred directly, the capture stage ends and the target stage begins.

Thus, immediate handlers are invoked regardless of the useCapture parameter.

  • The question was why on one element, on which 2 events are registered, but with different parameters, the bubling event first fires, and only then capture - after all, you can see in the picture that the capture event should start first - ruslik September
  • @ruslik understood, add now - Pavel Mayorov
  • Thus, the immediate handlers are called regardless of the useCapture parameter - that is, in the order of their registration, did I understand correctly? - ruslik
  • @ruslik yes, you understood correctly - Pavel Mayorov