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:

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

Piesaistīsim šai pogai funkciju func:

let 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:

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

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

Dota saite un poga. Nospiežot pogu, pievienojiet saites teksta beigās tās atribūta href saturu apaļās iekavās. Izdariet tā, lai šis pievienošanās notiek tikai pirmo reizi nospiežot.

Dota poga, kuras vērtība ir skaitlis 1. Izdariet tā, lai, klikšķinot uz šīs pogas, tās vērtība katru reizi palielinātos par vienu. Pēc tam, kad pogas vērtība sasniedz 10 - atvienojiet notikumu apstrādātāju, lai poga vairs nereaģētu uz nospiedienu.