Methode on

De methode on maakt het mogelijk om een gebeurtenisafhandelaar aan een element toe te voegen. Om de afhandelaar te verwijderen kan men gebruikmaken van de methode off. Om ervoor te zorgen dat een gebeurtenis slechts één keer wordt geactiveerd, waarna de afhandelaar zichzelf verwijdert - gebruik de methode one. Elementen waaraan we een afhandelaar binden, moeten bestaan op het moment van aanroepen van on.

Syntaxis

Zo voegen we een gebeurtenisafhandelaar toe aan een element. Als eerste parameter wordt, in de vorm van een string, één of meer gebeurtenissen doorgegeven, gescheiden door spaties. Als tweede parameter geven we een aanvullende filterende selector voor afstammelingen binnen het element door. Als derde - aanvullende gegevens, die worden doorgegeven aan de afhandelaar in de eigenschap event.data wanneer de gebeurtenis wordt geactiveerd. De tweede en derde parameter zijn optioneel. Als vierde geven we de functie-afhandelaar door, waaraan het gebeurtenisobject en optionele extra parameters worden doorgegeven. Als in plaats van de functie-afhandelaar false wordt doorgegeven, dan retourneert de functie simpelweg false:

$(selector).on(gebeurtenissen, [selector], [gegevens], functie-afhandelaar(gebeurtenisobject, [extra parameters]));

Men kan de methode on ook op een andere manier gebruiken. Dan wordt als eerste parameter een JavaScript-object doorgegeven, waarbij de sleutels het gebeurtenistype zijn, en de waarden de functie-afhandelaars die worden aangeroepen voor de gebeurtenissen:

$(selector).on({'gebeurtenistype': handler}, [selector], [gegevens]);

Als we geen extra selector doorgeven, dan wordt de gebeurtenis geactiveerd op het element waaraan we de afhandelaar hechten. Anders - op het afstammelingselement dat overeenkomt met deze selector (gedelegeerde gebeurtenissen). Dezelfde gebeurtenisafhandelaar kan meerdere keren aan een element worden gebonden.

Voorbeeld

Laten we in een alert de tekst van de alinea met #test weergeven bij een klik erop. Klikken op andere alinea's zullen niets veroorzaken:

<p>tekst1</p>
<p id="test">tekst2</p>
<p>tekst3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Voorbeeld

Laten we bij een klik op de alinea de gegevens weergeven die we hebben doorgegeven aan de methode on. We maken gebruik van de functie-afhandelaar testFunc, die we hebben aangemaakt:

<p>klik</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Zie ook

methode off,
die het mogelijk maakt om een gebeurtenisafhandelaar te verwijderen van een element
methode one,
die het mogelijk maakt dat een gebeurtenis één keer wordt geactiveerd, waarna de afhandelaar automatisch wordt verwijderd
object event,
dat informatie bevat over de gebeurtenis
methode trigger,
die het mogelijk maakt om alle gebeurtenisafhandelaars, gebonden aan een element, te starten voor gebeurtenissen van een opgegeven type
JavaScript methode bind,
die het mogelijk maakt om een context aan een functie te binden