Notikumu atvienošana JavaScript

Šajā nodarbībā mēs iemācīsimies atvienot notikumu apstrādātājus, kas iepriekš bija piesaistīti elementiem. Piemēram, ir dota šāda poga:

html<input id="button" type="submit">

Piesaistīsim šai pogai funkciju func:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

Tagad darīsim tā, lai notikumu apstrādātājs darbotos pie pirmā klikšķa, bet pēc tam tiktu atvienots no pogas. Šim nolūkam pastāv īpaša metode removeEventListener. Šī metode pirmo parametru pieņem kā notikuma veidu, bet otro - kā atsauci uz funkciju, kuru vajag atvienot.

Parasti tas nozīmē, ka notikumu apstrādātājs tiek atvienots tādā pašā veidā, kā tas tika piesaistīts. Tas ir, ja mēs to piesaistījām šādi: addEventListener('click', func), tad arī atvienosim ar tiem pašiem parametriem, šādi: removeEventListener('click', func).

Tātad, atrisināsim uzdevumu, ko mēs sev izvirzījām:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}