Metodo on

Il metodo on permette di aggiungere un gestore di eventi a un elemento. Per rimuovere il gestore si può utilizzare il metodo off, per far sì che l'evento si attivi una sola volta, e poi il gestore si rimuova da solo - utilizzare il metodo one. Gli elementi a cui associamo il gestore devono esistere al momento della chiamata di on.

Sintassi

In questo modo aggiungiamo un gestore di eventi a un elemento, come primo parametro, sotto forma di stringa, viene passato uno o più eventi separati da spazi, come secondo parametro passiamo un selettore filtro aggiuntivo per i discendenti all'interno dell'elemento, come terzo - dati aggiuntivi, che vengono passati al gestore nella proprietà event.data quando l'evento si attiva. Il secondo e il terzo parametro sono opzionali. Come quarto passiamo la funzione gestore, a cui viene passato l'oggetto evento e parametri aggiuntivi opzionali. Se al posto della funzione gestore si passa false, la funzione restituirà semplicemente false:

$(selettore).on(eventi, [selettore], [dati], funzione-gestore(oggetto evento, [parametri aggiuntivi]));

Si può utilizzare il metodo on in un altro modo, in questo caso come primo parametro viene passato un oggetto JavaScript, dove le chiavi sono il tipo di evento, e i valori sono le funzioni gestore, invocate per gli eventi:

$(selettore).on({'tipo evento': handler}, [selettore], [dati]);

Se non passiamo un selettore aggiuntivo, l'evento si attiva sull'elemento a cui colleghiamo il gestore, altrimenti - sull' elemento discendente che corrisponde a quel selettore (eventi delegati). Lo stesso gestore di eventi può essere collegato a un elemento più volte.

Esempio

Visualizziamo in alert, il testo del paragrafo con #test al click su di esso, i click sugli altri paragrafi non porteranno a nulla:

<p>testo1</p>
<p id="test">testo2</p>
<p>testo3</p>

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

Esempio

Al click su un paragrafo visualizziamo i dati che abbiamo passato al metodo on. Utilizziamo la funzione gestore testFunc, che abbiamo creato:

<p>click</p>

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

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

Vedi anche

metodo off,
che permette di rimuovere un gestore di eventi da un elemento
metodo one,
che permette all'evento di attivarsi una volta, e poi rimuovere automaticamente il gestore
oggetto event,
che contiene informazioni sull'evento
metodo trigger,
che permette di attivare tutti i gestori di eventi, associati all'elemento per eventi di un tipo specificato
Metodo JavaScript bind,
che permette di associare un contesto a una funzione