Dezlegarea evenimentelor în JavaScript

În această lecție vom învăța cum să dezlegăm manipulatoarele de evenimente care au fost anterior legate de noi la elemente. Să luăm ca exemplu următorul buton:

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

Să legăm funcția func de acest buton:

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

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

Acum să facem astfel încât manipulatorul de eveniment să se declanșeze la primul click, iar apoi să se dezlege de buton. Pentru aceasta există o metodă specială removeEventListener. Această metodă primește ca prim parametru tipul evenimentului, iar ca al doilea - o referință la funcția care trebuie dezlegată.

De regulă, aceasta înseamnă că manipulatorul de eveniment este dezlegat în același mod în care a fost legat. Adică, dacă l-am legat astfel: addEventListener('click', func), atunci îl vom dezlega cu aceiași parametri, astfel: removeEventListener('click', func).

Deci, să rezolvăm sarcina stabilită de noi:

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

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

Este dat un link și un buton. La apăsarea butonului adăugați la sfârșitul textului linkului conținutul atributului său href între paranteze rotunde. Faceți astfel, încât această adăugare să aibă loc doar la prima apăsare.

Este dat un buton, a cărui valoare este numărul 1. Faceți astfel încât la click pe acest buton valoarea lui să crească de fiecare dată cu una. După ce valoarea butonului atinge 10 - dezlegați manipulatorul de eveniment, astfel încât butonul să nu mai reacționeze la apăsare.