Ontkoppelingsgebeurtenisse in JavaScript

In hierdie les sal ons leer hoe om gebeurtenishanteerders wat voorheen daaraan geheg is, van elemente te ontkoppel. Laat die volgende knoppie as voorbeeld gegee wees:

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

Laat ons die funksie func aan hierdie knoppie koppel:

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

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

Kom ons maak nou so dat die gebeurtenishanteerder slegs by die eerste klik aktiveer, en daarna van die knoppie ontkoppel word. Daar bestaan 'n spesiale metode hiervoor genaamd removeEventListener. Hierdie metode neem die gebeurtenistipe as eerste parameter, en 'n verwysing na die funksie wat ontkoppel moet word as tweede.

Gewoonlik beteken dit dat die gebeurtenishanteerder op dieselfde manier ontkoppel word as wat dit gekoppel is. As ons dit so gekoppel het: addEventListener('click', func), dan sal ons dit ook met dieselfde parameters ontkoppel, soos volg: removeEventListener('click', func).

Laat ons dus die gestelde taak oplos:

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

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

'n Skakel en 'n knoppie word gegee. Voeg by die aanskaf van die knoppie die inhoud van die skakel se href-kenmerk by die einde van die skakelteks in ronde hakies. Maak seker dat hierdie byvoeging slegs by die eerste aanskaf plaasvind.

'n Knoppie word gegee waarvan die waarde die getal 1 is. Maak so dat met elke klik op hierdie knoppie sy waarde met een vermeerder. Nadat die knoppie se waarde 10 bereik het - ontkoppel die hanteerder sodat die knoppie nie meer op aanskaf reageer nie.