jQuery Metodi di eventi

jQuery è fatta su misura per rispondere agli eventi in una pagina HTML.

Quali sono Eventi?

Tutte le azioni del diverso del visitatore che una pagina web può rispondere sono chiamati eventi.

Un evento rappresenta il momento preciso in cui succede qualcosa.

Esempi:

muovere un mouse su un elemento
la selezione di un pulsante di scelta
cliccando su un elemento

Il termine "fires/fired" è spesso usato con gli eventi. Esempio: "La keypress evento viene generato, il momento in cui si preme un tasto".

Qui ci sono alcuni eventi DOM comuni:

eventi mouse	Eventi della tastiera	Modulo Eventi	Documento / finestra Eventi
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery Sintassi Per Metodi di eventi

In jQuery, la maggior parte degli eventi DOM hanno un metodo di jQuery equivalente.

Per assegnare un evento click a tutti i paragrafi su una pagina, si può fare questo:

$("p").click();

Il passo successivo è quello di definire cosa dovrebbe succedere quando l'evento. È necessario passare una funzione per l'evento:

$("p").click(function(){
// action goes here!!
});

Comunemente utilizzati metodi di eventi jQuery

$(document).ready()

Il $(document).ready() metodo ci permette di eseguire una funzione quando il documento è a pieno carico. Questo evento è già spiegato nel jQuery Sintassi capitolo.

click()

Il click() metodo attribuisce una funzione di gestore di eventi per un elemento HTML.

La funzione viene eseguita quando l'utente fa clic sull'elemento HTML.

Il seguente esempio dice: Quando un incendio clic evento su un <p> elemento; nascondere la corrente <p> elemento:

Esempio

$("p").click(function(){
$(this).hide();
});

Prova tu stesso "

dblclick()

Il dblclick() metodo attribuisce una funzione di gestore di eventi per un elemento HTML.

viene eseguita la funzione quando l'utente fa doppio clic sulla elemento HTML:

Esempio

$("p").dblclick(function(){
$(this).hide();
});

Prova tu stesso "

mouseenter()

Il mouseenter() metodo attribuisce una funzione di gestore di eventi per un elemento HTML.

La funzione viene eseguita quando il puntatore del mouse entra l'elemento HTML:

Esempio

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

Prova tu stesso "

mouseleave()

Il mouseleave() metodo attribuisce una funzione di gestore di eventi per 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!");
});

Prova tu stesso "

mousedown()

Il mousedown() metodo attribuisce una funzione di gestore di eventi per un elemento HTML.

La funzione viene eseguita, quando viene premuto il sinistro, pulsante centrale o destro del mouse verso il basso, mentre il mouse si trova sopra l'elemento HTML:

Esempio

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

Prova tu stesso "

mouseup()

Il mouseup() metodo attribuisce una funzione di gestore di eventi per un elemento HTML.

La funzione viene eseguita, quando la sinistra, tasto centrale o destro del mouse viene rilasciato, mentre il mouse si trova sopra l'elemento HTML:

Esempio

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

Prova tu stesso "

hover()

Il hover() metodo richiede due funzioni ed è una combinazione del mouseenter() e mouseleave() metodi.

La prima funzione viene eseguita quando il mouse entra l'elemento HTML, e viene eseguita la seconda funzione quando il mouse lascia l'elemento HTML:

Esempio

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

Prova tu stesso "

focus()

La focus() metodo attribuisce una funzione di gestore di eventi per un campo di modulo HTML.

La funzione viene eseguita quando il campo di modulo si concentrerà:

Esempio

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

Prova tu stesso "

blur()

La blur() metodo attribuisce una funzione di gestore di eventi per un campo di modulo HTML.

La funzione viene eseguita quando il campo di modulo perde il focus:

Esempio

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Prova tu stesso "

L' on() Metodo

L' on() metodo attribuisce uno o più gestori di eventi per gli elementi selezionati.

Fissare un evento click per un <p> elemento:

Esempio

$("p").on("click", function(){
$(this).hide();
});

Prova tu stesso "

Collegare più gestori di eventi a un elemento <p>:

Esempio

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

Prova tu stesso "

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »