Események beható tanulmányozása JavaScriptben

Az események bubblingjén kívül létezik még capturing is. Valójában az esemény először fentről lefelé halad (a capturing fázis), eléri a mi elemünket (a target fázis), és csak ezután kezd el bubblingolni (a bubbling fázis).

Ahhoz, hogy egy eseménykezelőt a capturing fázisra illesszünk fel, a addEventListener harmadik, opcionális paramétere szolgál. Ha ennek értéke true - az esemény a capturing fázisban aktiválódik, ha false - akkor a bubbling fázisban (ez az alapértelmezett). Nézzük meg egy példán:

javascriptelem1.addEventListener('click', function() {
  console.log('zöld - capturing');
}, true);
elem1.addEventListener('click', function() {
  console.log('zöld - bubbling');
}, false);

elem2.addEventListener('click', function() {
  console.log('kék - capturing');
}, true);
elem2.addEventListener('click', function() {
  console.log('kék - bubbling');
}, false);

elem3.addEventListener('click', function() {
  console.log('piros - capturing');
}, true);
elem3.addEventListener('click', function() {
  console.log('piros - bubbling');
}, false);

Kipróbálhatod: