Methode off
De methode off maakt het mogelijk om een gebeurtenisafhandelaar
van een element los te koppelen. Om een afhandelaar te koppelen
kan men gebruik maken van de methode
off.
Syntaxis
Zo verwijderen we een gebeurtenisafhandelaar van een element,
als eerste parameter wordt in de vorm van een string
een of meerdere gebeurtenissen doorgegeven, gescheiden door
spaties, als tweede - geven we een aanvullende
filterende selector door voor afstammelingen binnen het element
(deze moet overeenkomen met wat we hebben doorgegeven aan de
methode on bij het koppelen van de afhandelaar). Om alle gedelegeerde gebeurtenissen te verwijderen,
geef de waarde '**' door. De tweede parameter
is optioneel. Als derde geven we de afhandelingsfunctie door
(die we hebben gekoppeld), waaraan het gebeurtenisobject
wordt doorgegeven of we geven false door:
$(selector).off(gebeurtenissen, [selector], afhandelingsfunctie(gebeurtenisobject));
Men kan de methode off op een andere manier gebruiken,
dan wordt als eerste parameter een
JavaScript-object doorgegeven, waar de sleutels het gebeurtenistype zijn, en
de waarden de afhandelingsfuncties zijn die we aan het
element hebben toegevoegd:
$(selector).off({'gebeurtenistype': handler}, [selector]);
We kunnen simpelweg één parameter doorgeven in de vorm
van een object jQuery.Event:
$(selector).off(gebeurtenis);
Als er geen parameters aan de methode worden doorgegeven, dan koppelen we alle gekoppelde afhandelaars van het element los:
$(selector).off();
Voorbeeld
Laten we aan de alinea's de afhandelingsfunctie
testFunc toevoegen. Maar we verwijderen meteen de afhandelaar bij de
tweede alinea, zodat een klik op de tweede alinea nergens
toe zal leiden (als we de laatste
regel code echter uitschakelen, zullen we zien hoe de gebeurtenis wordt geactiveerd en
bij een klik op de tweede alinea):
<p id="test1">click1</p>
<p id="test2">click2</p>
function testFunc(event) {
alert(event.data.text);
}
$('#test1').on('click', {text: 'aaa'}, testFunc); // voeg afhandelaar toe
$('#test2').on('click', {text: 'bbb'}, testFunc); // voeg afhandelaar toe
$('#test2').off('click', testFunc); // verwijder afhandelaar
