Odvazování událostí v JavaScriptu

V této lekci se naučíme odvazovat obslužné rutiny událostí, které byly dříve navázány nami na elementy. Nechť pro příklad je dáno následující tlačítko:

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

Přivažme k tomuto tlačítku funkci func:

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

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

Pojďme nyní udělat to, aby obslužná rutina události reagovala na první kliknutí, a poté se odvázala od tlačítka. K tomu existuje speciální metoda removeEventListener. Tato metoda přijímá jako první parametr typ události a jako druhý - odkaz na funkci, kterou je třeba odvázat.

Zpravidla to znamená, že obslužná rutina události se odvazuje stejně, jako byla navázána. To znamená, že pokud jsme ji navázali takto: addEventListener('click', func), pak ji také odvážeme se stejnými parametry, takto: removeEventListener('click', func).

Takže, vyřešme zadaný úkol:

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

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

Je dána odkaz a tlačítko. Po stisknutí tlačítka přidejte na konec textu odkazu obsah jeho atributu href v kulatých závorkách. Zařiďte, aby toto přidání proběhlo pouze při prvním stisknutí.

Je dáno tlačítko, jehož hodnotou je číslo 1. Zařiďte, aby po kliknutí na toto tlačítko se jeho hodnota pokaždé zvýšila o jednu. Poté, co hodnota tlačítka dosáhne 10 - odvažte obslužnou rutinu události, aby tlačítko dále nereagovalo na stisknutí.