Իվենթների ընկղմում JavaScript-ում

Իվենթների բաբլյուխից բացի գոյություն ունի նաև ընկղմում: Իրականում իվենթը նախ վերևից ներքև է գնում (բռնման փուլ), հասնում է մեր էլեմենտին (թիրախի փուլ) և միայն դրանից հետո սկսում է բաբլյուխել (բաբլյուխի փուլ):

Որպեսզի կարողանանք իվենթի հենդլեր կախել հաշվի առնելով բռնման փուլը՝ addEventListener-ի մեջ կա երրորդ օպցիոնալ պարամետրը: Եթե այն հավասար է true-ի, ապա իվենթը կաշխատի բռնման փուլում, իսկ եթե false-ի՝ բաբլյուխի փուլում (դա լռելյայն է): Դիտարկենք օրինակով.

javascriptelem1.addEventListener('click', function() {
  console.log('կանաչ - ընկղմում');
}, true);
elem1.addEventListener('click', function() {
  console.log('կանաչ - բաբլյուխ');
}, false);

elem2.addEventListener('click', function() {
  console.log('երկնագույն - ընկղմում');
}, true);
elem2.addEventListener('click', function() {
  console.log('երկնագույն - բաբլյուխ');
}, false);

elem3.addEventListener('click', function() {
  console.log('կարմիր - ընկղմում');
}, true);
elem3.addEventListener('click', function() {
  console.log('կարմիր - բաբլյուխ');
}, false);

Կարող եք ստուգել.