Įvykių atjungimas JavaScript

Šioje pamokoje išmoksime atjungti įvykių tvarkytuvus, kurie anksčiau buvo prijungti prie elementų. Tarkime, pavyzdžiui, duotas toks mygtukas:

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

Prijungkime prie šio mygtuko funkciją func:

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

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

Dabar padarykime taip, kad įvykio tvarkytuvas veiktų pirmuoju paspaudimu, o vėliau atsijungtų nuo mygtuko. Tam yra specialus metodas removeEventListener. Šis metodas pirmu parametru priima įvykio tipą, o antruoju - nuorodą į funkciją, kurią reikia atjungti.

Paprastai tai reiškia, kad įvykio tvarkytuvas atjungiamas taip pat, kaip ir buvo prijungtas. Tai yra, jei mes jį prijungėme taip: addEventListener('click', func), tai ir atjungsime tais pačiais parametrais, taip: removeEventListener('click', func).

Taigi, išspręskime užduotį, kurią sau uždėjome:

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

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