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

Mettiti alla prova con gli esercizi

Esercizio:

Usa l' evento corretto per nascondere tutti gli elementi <p> ​​con un "clic".

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


jQuery metodi di eventi

Per un riferimento completo agli eventi jQuery, vai al nostro Riferimento agli eventi jQuery .