Metoden on

Metoden on låter dig lägga till en händelsehanterare till ett element. För att ta bort händelsehanteraren kan du använda metoden off, för att händelsen endast ska utlösas en gång, varefter hanteraren tar bort sig själv - använd metoden one. Element som vi binder hanterare till måste finnas vid tidpunkten för anropet till on.

Syntax

Så här lägger vi till en händelsehanterare till ett element, som första parameter skickas en eller flera händelser separerade med mellanslag som en sträng, som andra parameter skickar vi ett extra filterurval för avkommerelement inuti elementet, som tredje - extra data som skickas till hanteraren i egenskapen event.data när händelsen utlöses. Den andra och tredje parametern är valfria. Som fjärde parameter skickar vi hanterarfunktionen, som tar emot händelseobjektet och valfria extra parametrar. Om false skickas istället för en hanterarfunktion, kommer funktionen helt enkelt att returnera false:

$(selector).on(events, [selector], [data], handlerFunction(eventObject, [extraParameters]));

Du kan använda metoden on på ett annat sätt, då skickas ett JavaScript-objekt som första parameter, där nycklarna är händelsetyper och värdena är hanterarfunktioner som anropas för händelserna:

$(selector).on({'event type': handler}, [selector], [data]);

Om vi inte skickar ett extra urval, utlöses händelsen på elementet som vi fäster hanteraren till, annars - på avkommerelementet som matchar det urvalet (delegerade händelser). Samma händelsehanterare kan vara bunden till ett element flera gånger.

Exempel

Låt oss i en alert, visa texten i stycket med #test vid klick på det, klick på andra stycken leder inte till någonting:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

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

Exempel

Låt oss vid klick på ett stycke visa data som vi skickade till metoden on. Vi använder hanterarfunktionen testFunc, som vi skapat:

<p>click</p>

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

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

Se även

metoden off,
som låter dig ta bort en händelsehanterare från ett element
metoden one,
som låter en händelse utlösas en gång, varefter hanteraren automatiskt tas bort
objektet event,
som innehåller information om händelsen
metoden trigger,
som låter dig starta alla händelsehanterare, bundna till ett element för händelser av en given typ
JavaScript-metoden bind,
som låter dig binda en kontext till en funktion