Metodi di eventi jQuery
jQuery è fatto su misura per rispondere agli eventi in una pagina HTML.
Cosa sono gli eventi?
Tutte le diverse azioni dei visitatori a cui una pagina web può rispondere sono chiamate eventi.
Un evento rappresenta il momento preciso in cui qualcosa accade.
Esempi:
- spostando il mouse su un elemento
- selezionando un pulsante di opzione
- cliccando su un elemento
Il termine "incendi/licenziati" è spesso usato con gli eventi. Esempio: "L'evento keypress viene attivato, nel momento in cui si preme un tasto".
Ecco alcuni eventi DOM comuni:
Mouse Events | Keyboard Events | Form Events | Document/Window Events |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
Sintassi jQuery per i metodi di evento
In jQuery, la maggior parte degli eventi DOM ha un metodo jQuery equivalente.
Per assegnare un evento clic a tutti i paragrafi di una pagina, puoi procedere come segue:
$("p").click();
Il passaggio successivo consiste nel definire cosa dovrebbe accadere quando l'evento si attiva. Devi passare una funzione all'evento:
$("p").click(function(){
// action goes here!!
});
Metodi di eventi jQuery comunemente usati
$(documento).pronto()
Il $(document).ready()
metodo ci consente di eseguire una funzione quando il documento è completamente caricato. Questo evento è già spiegato nel
capitolo sulla sintassi di jQuery .
clic()
Il click()
metodo associa una funzione del gestore eventi a un elemento HTML.
La funzione viene eseguita quando l'utente fa clic sull'elemento HTML.
L'esempio seguente dice: Quando un evento click viene attivato su un <p>
elemento; nascondi l' <p>
elemento corrente:
Esempio
$("p").click(function(){
$(this).hide();
});
dblclick()
Il dblclick()
metodo associa una funzione del gestore eventi a un elemento HTML.
La funzione viene eseguita quando l'utente fa doppio clic sull'elemento HTML:
Esempio
$("p").dblclick(function(){
$(this).hide();
});
immissione del mouse()
Il mouseenter()
metodo associa una funzione del gestore eventi a un elemento HTML.
La funzione viene eseguita quando il puntatore del mouse entra nell'elemento HTML:
Esempio
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
lascia il mouse ()
Il mouseleave()
metodo associa una funzione del gestore eventi a un elemento HTML.
La funzione viene eseguita quando il puntatore del mouse lascia l'elemento HTML:
Esempio
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
verso il basso ()
Il mousedown()
metodo associa una funzione del gestore eventi a un elemento HTML.
La funzione viene eseguita premendo il pulsante sinistro, centrale o destro del mouse, mentre il mouse si trova sopra l'elemento HTML:
Esempio
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
alza il mouse ()
Il mouseup()
metodo associa una funzione del gestore eventi a un elemento HTML.
La funzione viene eseguita, quando si rilascia il pulsante sinistro, centrale o destro del mouse, mentre il mouse si trova sopra l'elemento HTML:
Esempio
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
passa il mouse ()
Il hover()
metodo accetta due funzioni ed è una combinazione dei
metodi mouseenter()
e .mouseleave()
La prima funzione viene eseguita quando il mouse entra nell'elemento HTML e la seconda funzione viene eseguita quando il mouse lascia l'elemento HTML:
Esempio
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
messa a fuoco()
Il focus()
metodo allega una funzione del gestore eventi a un campo modulo HTML.
La funzione viene eseguita quando il campo del modulo diventa attivo:
Esempio
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
sfocatura()
Il blur()
metodo allega una funzione del gestore eventi a un campo modulo HTML.
La funzione viene eseguita quando il campo del modulo perde lo stato attivo:
Esempio
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Il metodo on()
Il on()
metodo allega uno o più gestori di eventi per gli elementi selezionati.
Allega un evento click a un <p>
elemento:
Esempio
$("p").on("click", function(){
$(this).hide();
});
Allega più gestori di eventi a un <p>
elemento:
Esempio
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Esercizi jQuery
jQuery metodi di eventi
Per un riferimento completo agli eventi jQuery, vai al nostro Riferimento agli eventi jQuery .