Imersiunea evenimentelor în JavaScript

În afară de bubbling-ul evenimentelor, există și immersiunea. De fapt, evenimentul merge mai întâi de sus în jos (faza de capturare), ajunge la elementul nostru (faza țintă) și abia apoi începe să facă bubbling (faza de bubbling).

Pentru a atașa un handler de eveniment ținând cont de faza de capturare, în addEventListener există un al treilea parametru opțional. Dacă acesta este true - evenimentul se va declanșa în faza de capturare, iar dacă este false - în faza de bubbling (aceasta este valoarea implicită). Să vedem un exemplu:

javascriptelem1.addEventListener('click', function() {
  console.log('verde - immersiune');
}, true);
elem1.addEventListener('click', function() {
  console.log('verde - bubbling');
}, false);

elem2.addEventListener('click', function() {
  console.log('albastru - immersiune');
}, true);
elem2.addEventListener('click', function() {
  console.log('albastru - bubbling');
}, false);

elem3.addEventListener('click', function() {
  console.log('roșu - immersiune');
}, true);
elem3.addEventListener('click', function() {
  console.log('roșu - bubbling');
}, false);

Puteți verifica: