jQuery - Gestione degli eventi

Abbiamo la capacità di creare pagine web dinamiche utilizzando eventi. Gli eventi sono azioni che possono essere rilevate dalla tua applicazione web.

Di seguito sono riportati gli eventi di esempio:

Un clic del mouse
Caricamento di una pagina web
Posizionare il mouse su un elemento
Invio di un modulo HTML
Una sequenza di tasti sulla tastiera, ecc.

Quando questi eventi vengono attivati, puoi quindi utilizzare una funzione personalizzata per fare praticamente tutto ciò che desideri con l'evento. Queste funzioni personalizzate chiamano gestori di eventi.

Gestori di eventi vincolanti

Utilizzando il jQuery Event Model, possiamo stabilire gestori di eventi su elementi DOM con l'estensione bind() metodo come segue -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Questo codice farà sì che l'elemento di divisione risponda all'evento clic; quando un utente fa clic all'interno di questa divisione in seguito, verrà visualizzato l'avviso.

Questo produrrà il seguente risultato:

La sintassi completa del comando bind () è la seguente:

selector.bind( eventType[, eventData], handler)

Di seguito la descrizione dei parametri:

eventType- Una stringa contenente un tipo di evento JavaScript, come clic o invia. Fare riferimento alla sezione successiva per un elenco completo dei tipi di eventi.
eventData - Questo è un parametro opzionale è una mappa di dati che verrà passata al gestore di eventi.
handler - Una funzione da eseguire ogni volta che viene attivato l'evento.

Rimozione dei gestori di eventi

In genere, una volta stabilito un gestore di eventi, rimane attivo per il resto della vita della pagina. Potrebbe essere necessario rimuovere il gestore eventi.

jQuery fornisce l'estensione unbind()comando per rimuovere un gestore di eventi in uscita. La sintassi di unbind () è la seguente:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Di seguito la descrizione dei parametri:

eventType- Una stringa contenente un tipo di evento JavaScript, come clic o invia. Fare riferimento alla sezione successiva per un elenco completo dei tipi di eventi.
handler - Se fornito, identifica il listener specifico che deve essere rimosso.

Tipi di eventi

Di seguito sono riportati i tipi di eventi multipiattaforma e consigliati che è possibile associare utilizzando JQuery:

Sr.No.	Tipo di evento e descrizione
1	blur Si verifica quando l'elemento perde lo stato attivo.
2	change Si verifica quando l'elemento cambia.
3	click Si verifica quando un clic del mouse.
4	dblclick Si verifica quando si fa doppio clic con il mouse.
5	error Si verifica quando si verifica un errore durante il caricamento o lo scaricamento, ecc.
6	focus Si verifica quando l'elemento viene attivato.
7	keydown Si verifica quando viene premuto il tasto.
8	keypress Si verifica quando il tasto viene premuto e rilasciato.
9	keyup Si verifica quando la chiave viene rilasciata.
10	load Si verifica quando il documento viene caricato.
11	mousedown Si verifica quando viene premuto il pulsante del mouse.
12	mouseenter Si verifica quando il mouse entra in una regione dell'elemento.
13	mouseleave Si verifica quando il mouse lascia una regione dell'elemento.
14	mousemove Si verifica quando il puntatore del mouse si sposta.
15	mouseout Si verifica quando il puntatore del mouse esce da un elemento.
16	mouseover Si verifica quando il puntatore del mouse si sposta su un elemento.
17	mouseup Si verifica quando viene rilasciato il pulsante del mouse.
18	resize Si verifica quando la finestra viene ridimensionata.
19	scroll Si verifica quando si scorre la finestra.
20	select Si verifica quando viene selezionato un testo.
21	submit Si verifica quando viene inviato il modulo.
22	unload Si verifica quando i documenti vengono scaricati.

L'oggetto evento

La funzione di callback accetta un singolo parametro; quando il gestore viene chiamato, l'oggetto evento JavaScript verrà passato attraverso di esso.

L'oggetto evento spesso non è necessario e il parametro viene omesso, poiché di solito è disponibile un contesto sufficiente quando il gestore è vincolato a sapere esattamente cosa deve essere fatto quando il gestore viene attivato, tuttavia ci sono alcuni attributi a cui è necessario accedere.

Gli attributi dell'evento

Le seguenti proprietà / attributi dell'evento sono disponibili e sono accessibili in modo sicuro in modo indipendente dalla piattaforma:

Sr.No.	Proprietà e descrizione
1	altKey Impostato su true se è stato premuto il tasto Alt quando l'evento è stato attivato, false in caso contrario. Il tasto Alt è denominato Opzione sulla maggior parte delle tastiere Mac.
2	ctrlKey Impostato su true se è stato premuto il tasto Ctrl quando l'evento è stato attivato, false in caso contrario.
3	data Il valore, se presente, passato come secondo parametro al comando bind () quando è stato stabilito il gestore.
4	keyCode Per gli eventi keyup e keydown, restituisce il tasto che è stato premuto.
5	metaKey Impostato su true se è stato premuto il tasto Meta quando l'evento è stato attivato, false in caso contrario. Il tasto Meta è il tasto Ctrl sui PC e il tasto Comando sui Mac.
6	pageX Per gli eventi del mouse, specifica la coordinata orizzontale dell'evento rispetto all'origine della pagina.
7	pageY Per gli eventi del mouse, specifica la coordinata verticale dell'evento rispetto all'origine della pagina.
8	relatedTarget Per alcuni eventi del mouse, identifica l'elemento che il cursore ha lasciato o inserito quando l'evento è stato attivato.
9	screenX Per gli eventi del mouse, specifica la coordinata orizzontale dell'evento rispetto all'origine dello schermo.
10	screenY Per gli eventi del mouse, specifica la coordinata verticale dell'evento rispetto all'origine dello schermo.
11	shiftKey Impostato su true se è stato premuto il tasto Maiusc quando l'evento è stato attivato, false in caso contrario.
12	target Identifica l'elemento per il quale è stato attivato l'evento.
13	timeStamp Il timestamp (in millisecondi) in cui è stato creato l'evento.
14	type Per tutti gli eventi, specifica il tipo di evento che è stato attivato (ad esempio, clic).
15	which Per gli eventi della tastiera, specifica il codice numerico per il tasto che ha causato l'evento e per gli eventi del mouse, specifica quale pulsante è stato premuto (1 per sinistra, 2 per centro, 3 per destra).

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Questo produrrà il seguente risultato:

I metodi degli eventi

C'è un elenco di metodi che possono essere chiamati su un oggetto evento -

Sr.No.	Metodo e descrizione
1	preventDefault () Impedisce al browser di eseguire l'azione predefinita.
2	isDefaultPrevented () Restituisce se event.preventDefault () è stato mai chiamato su questo oggetto evento.
3	stopPropagation () Interrompe il bubbling di un evento agli elementi padre, impedendo a qualsiasi gestore padre di essere informato dell'evento.
4	isPropagationStopped () Restituisce se event.stopPropagation () è mai stato chiamato su questo oggetto evento.
5	stopImmediatePropagation () Interrompe l'esecuzione del resto degli handler.
6	isImmediatePropagationStopped () Restituisce se event.stopImmediatePropagation () è stato mai chiamato su questo oggetto evento.

Metodi di manipolazione degli eventi

La tabella seguente elenca i metodi importanti relativi agli eventi:

Sr.No.	Metodo e descrizione
1	bind (tipo, [dati], fn) Associa un gestore a uno o più eventi (come il clic) per ogni elemento corrispondente. Può anche associare eventi personalizzati.
2	off (events [, selector] [, handler (eventObject)]) Questo fa l'opposto di live, rimuove un evento live associato.
3	hover (sopra, fuori) Simula il passaggio del mouse, ad esempio, lo spostamento del mouse su e fuori da un oggetto.
4	su (eventi [, selettore] [, dati], gestore) Associa un gestore a un evento (come il clic) per tutti gli elementi corrispondenti attuali e futuri. Può anche associare eventi personalizzati.
5	uno (tipo, [dati], fn) Associa un gestore a uno o più eventi da eseguire una volta per ogni elemento corrispondente.
6	pronto (fn) Associa una funzione da eseguire ogni volta che il DOM è pronto per essere attraversato e manipolato.
7	trigger (evento, [dati]) Attiva un evento su ogni elemento abbinato.
8	triggerHandler (evento, [dati]) Attiva tutti i gestori di eventi associati su un elemento.
9	sciogliere ([tipo], [fn]) Questo fa l'opposto di bind, rimuove gli eventi associati da ciascuno degli elementi corrispondenti.

Metodi di supporto degli eventi

jQuery fornisce anche una serie di funzioni di supporto degli eventi che possono essere utilizzate sia per attivare un evento che per associare qualsiasi tipo di evento menzionato sopra.

Metodi trigger

Di seguito è riportato un esempio che attiva l'evento sfocatura su tutti i paragrafi:

$("p").blur();

Metodi di rilegatura

Di seguito è riportato un esempio che legherebbe un file click evento su tutti i <div> -

$("div").click( function () { 
   // do something here
});

Ecco un elenco completo di tutti i metodi di supporto forniti da jQuery -

Sr.No.	Metodo e descrizione
1	blur( ) Attiva l'evento sfocatura di ogni elemento corrispondente.
2	blur( fn ) Associa una funzione all'evento di sfocatura di ogni elemento corrispondente.
3	change( ) Attiva l'evento di modifica di ogni elemento corrispondente.
4	change( fn ) Associa una funzione all'evento di modifica di ogni elemento corrispondente.
5	click( ) Attiva l'evento clic di ogni elemento corrispondente.
6	click( fn ) Associa una funzione all'evento clic di ogni elemento corrispondente.
7	dblclick( ) Attiva l'evento dblclick di ogni elemento corrispondente.
8	dblclick( fn ) Associa una funzione all'evento dblclick di ogni elemento corrispondente.
9	error( ) Attiva l'evento di errore di ogni elemento corrispondente.
10	error( fn ) Associa una funzione all'evento di errore di ogni elemento corrispondente.
11	focus( ) Attiva l'evento focus di ogni elemento corrispondente.
12	focus( fn ) Associa una funzione all'evento focus di ogni elemento corrispondente.
13	keydown( ) Attiva l'evento keydown di ogni elemento corrispondente.
14	keydown( fn ) Associa una funzione all'evento keydown di ogni elemento corrispondente.
15	keypress( ) Attiva l'evento di pressione dei tasti di ogni elemento corrispondente.
16	keypress( fn ) Associa una funzione all'evento di pressione dei tasti di ogni elemento corrispondente.
17	keyup( ) Attiva l'evento keyup di ogni elemento corrispondente.
18	keyup( fn ) Associa una funzione all'evento keyup di ogni elemento corrispondente.
19	load( fn ) Associa una funzione all'evento di caricamento di ogni elemento corrispondente.
20	mousedown( fn ) Associa una funzione all'evento mousedown di ogni elemento corrispondente.
21	mouseenter( fn ) Associa una funzione all'evento mouseenter di ogni elemento corrispondente.
22	mouseleave( fn ) Associa una funzione all'evento di uscita del mouse di ciascun elemento corrispondente.
23	mousemove( fn ) Associa una funzione all'evento mousemove di ogni elemento corrispondente.
24	mouseout( fn ) Associa una funzione all'evento mouseout di ogni elemento corrispondente.
25	mouseover( fn ) Associa una funzione all'evento mouseover di ogni elemento corrispondente.
26	mouseup( fn ) Associa una funzione all'evento mouseup di ogni elemento corrispondente.
27	resize( fn ) Associa una funzione all'evento di ridimensionamento di ogni elemento corrispondente.
28	scroll( fn ) Associa una funzione all'evento di scorrimento di ogni elemento corrispondente.
29	select( ) Attiva l'evento di selezione di ogni elemento corrispondente.
30	select( fn ) Associa una funzione all'evento di selezione di ogni elemento corrispondente.
31	submit( ) Attiva l'evento di invio di ogni elemento corrispondente.
32	submit( fn ) Associa una funzione all'evento di invio di ogni elemento corrispondente.
33	unload( fn ) Associa una funzione all'evento di scaricamento di ogni elemento corrispondente.