Does stopPropgation stop the event from propagating in the capture phase?

javascript dom-events event-bubbling event-propagation

Short answer: The order is:

Capture (down)
Target
Bubble (up).

If you call e.stopPropagation() in the capture phase (by setting the addEventListener()'s 3rd argument to true), it stops at 1, so 2 & 3 cannot receive it.

If you call e.stopPropagation() in the bubble phase (by setting the addEventListener()'s 3rd argument to false or just not assign it), the 1 & 2 already complete, so it just prevents the event from bubbling up from the level where you call stopPropagation().

javascript dom-events event-bubbling event-propagation

No, an event listener doesn't stop any events from propagating, unless you explicitly tell it to. The part you're referring to deals with the bubble phase specifically. IE's model doesn't support event capturing - full stop. the capture phase is what precedes the bubbling phase:

Top of the DOM --->event--->traverses--->to--->[target]+[event]-| (capture phase)      /\                                                       \/      |------------------------to--------back up-----------------  (bubble up)

javascript dom-events event-bubbling event-propagation

stopPropagation() will not stop the captured event handler from getting called. stopPropagation() will stop the bubbled event handler from getting called.

Jsfiddle

var outputDiv = document.getElementById('output');function log(msg) {  outputDiv.insertAdjacentHTML('afterend', msg + '<br>');}///////////////////////Bubbling listeners/////////////////////document.getElementById('row1').addEventListener('click', function(e) {  log('Bubbling row1 listener called');  e.stopPropagation();}, false);document.getElementById('row2').addEventListener('click', function(e) {  log('Bubbling row2 listener called');  //NO stopPropagation on this one.}, false);document.getElementById('table').addEventListener('click', function() {  log('Bubbling table listener called');}, false);document.addEventListener('click', function() {  log('Bubbling document listener called');}, false);///////////////////////Capturing listeners/////////////////////document.addEventListener('click', function() {  log('Capturing document listener called');}, true);document.getElementById('table').addEventListener('click', function() {  log('Capturing table listener called');}, true);

#outputwrapper {  border: 1px solid black;  height: 300px;  overflow: scroll;}

<table id="table" border="1">  <tbody>    <tr>      <td id="row1">        This row has stopPropagation      </td>    </tr>    <tr>      <td id="row2">        This row does not have stopPropagation      </td>    </tr>  </tbody></table><br>Output<br><div id="outputwrapper">  <div id="output"></div></div>

Expand snippet