2

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.

If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. If stopImmediatePropagation() is invoked during one such call, no remaining listeners will be called.

I found the method stopImmediatePropagation(), it causes me confusion to have several handlers for the same event, and even worse for the same element.

Could you give me a simple example?

Preferably in code please

  • Here are three questions that needs to be answered for one to completely understand this. 1. Why do events propagate? 2. Why attach different handlers on an element? 3. Why attach multiple event handlers for the same event on an element? – GoodMan Feb 17 '23 at 08:44

1 Answers1

0

The HTML5 specification has a nice example in the Event Handlers section that shows not only an event handler and multiple other event listeners attached to the same element for the same event, but also describes the slightly tricksy order in which they are run.

<button id="test">Start Demo</button>
<script>
 var button = document.getElementById('test');
 button.addEventListener('click', function () { alert('ONE') }, false);
 button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
 button.addEventListener('click', function () { alert('THREE') }, false);
 button.onclick = function () { alert('TWO'); };
 button.addEventListener('click', function () { alert('FOUR') }, false);
</script>

It says that on clicking the button, 'the page will show four alerts, with the text "ONE", "TWO", "THREE", and "FOUR" respectively.'

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • hi @Alohci +1 Doing some research, I believe that the order of execution is still open for discussion. I think it's best not to rely on the order or to use only one handler per event, right? –  Feb 17 '23 at 14:00
  • In this answer (the best answer), *they guarantee the order*, for example @Alohci - https://stackoverflow.com/questions/28480982/order-of-execution-of-functions-bound-to-an-event-in-javascript –  Feb 17 '23 at 14:00
  • @Coder23. Yes, the order is guaranteed. Event *Listeners* are executed in the order they are registered. But notice what's happening to the Event *Handler* in the HTML5 example. The "onclick" function is replaced, but the position of the handler within the listeners set doesn't change, so "TWO" is alerted before "THREE". – Alohci Feb 17 '23 at 14:13
  • I now understand @Alohci, the expected output would be "ONE", "THREE", "TWO" (considering that it respects its position in the code), "FOUR" ." Therefore, we must maintain consistency in the way we add events, i.e. using only `addEventListener()` statements right? –  Feb 17 '23 at 16:53
  • @Coder23 - There's merit in only using addEventListener(), yes. But providing you understand the rules fully, there's always the option of using them to your advantage. And if, like me, you work with a large team of developers, it can help to understand the consequences of the code your colleagues write. – Alohci Feb 17 '23 at 17:25
  • I understand @Alohci, thank you very much for example, the answer covered what I wanted, to know if several handlers can be added to the same event. –  Feb 17 '23 at 17:41