Sündmuste lahtiseostamine JavaScriptis

Selles õppetükis õpime lahti seostama sündmuste obradajaid, mis on varem elementidega seotud. Olgu meil näiteks antud järgmine nupp:

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

Seostame selle nupuga funktsiooni func:

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

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

Teeme nüüd nii, et sündmuse obradaja käivitub esimesel klikil, seejärel seostub nupust lahti. Selleks on olemas spetsiaalne meetod removeEventListener. See meetod võtab esimese parameetrina sündmuse tüübi ja teise parameetrina viite funktsioonile, mis tuleb lahti seostada.

Reeglina tähendab see, et sündmuse obradaja seostatakse lahti samamoodi, nagu ta seostati. See tähendab, kui me seostasime selle nii: addEventListener('click', func), siis seostame lahti samade parameetritega, nii: removeEventListener('click', func).

Nüüd lahendame meie enda poolt püstitatud ülesande:

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

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

Antud on link ja nupp. Vajutades nupule lisa lingi teksti lõppu selle href atribuudi väärtus ümarsulgudes. Tehke nii, et see lisamine toimub ainult esimesel vajutusel.

Antud on nupp, mille väärtuseks on arv 1. Tehke nii, et selle nupu peale vajutades suureneb selle väärtus iga kord ühe võrra. Pärast seda, kui nupu väärtus jõuab 10 - seostage obradaja lahti, et nupp ei reageeriks enam vajutustele.