Gestione degli eventi con jQuery

Il eventi sono situazioni che si verificano all'interno del nostro documento HTML, può essere attivato da situazioni del sistema stesso o da azioni dell'utente. In entrambi i casi, quando si verifica un evento è possibile eseguire una post-elaborazione utilizzando jQuery, così possiamo ottenere effetti migliori nei nostri programmi.
Questo è della massima importanza, poiché conoscendo questo aspetto e con l'aiuto del framework possiamo dare alle nostre pagine web e applicazioni più dinamismo.
Questa è la prima cosa a cui dovremmo rispondere quando lavoriamo con gli eventi in jQuery, Avevamo già detto che gli eventi sono azioni o situazioni che vengono innescate dal sistema o dall'utente, ad esempio quando il caricamento del documento è terminato il sistema fa scattare l'evento pronto o pronto, quando un utente clicca su un elemento viene attivato un evento omonimo.
Con questi piccoli esempi in mente, possiamo quindi vedere la sintassi di base per gestire qualsiasi tipo di evento, che è la seguente:

$ (selettore) .on ("nomeevento", funzione () {….})

Ricordiamo o chiariamo che il selettore è il nome con cui andremo ad individuare l'elemento all'interno del nostro documento, quindi con l'aiuto del metodo .sopra () Possiamo quindi dirgli quale evento dovrebbe ascoltare e quando lo rileva può eseguire una funzione anonima all'interno della nostra sezione script del HTML.
Qualcosa di interessante che possiamo evidenziare è che possiamo usare a responsabile per vari eventiIn altre parole, possiamo eseguire la stessa azione per più situazioni, dobbiamo solo elencare i diversi eventi che devono essere ascoltati, la sintassi è molto simile a quella che abbiamo appena visto.
$ (selettore) .on ("nomeevento1 nomeevento2 nomeevento3….", funzione () {….})
Dal momento che conosciamo il più elementare, dobbiamo anche iniziare a sapere che jQuery Ci semplificherà sempre la vita come sviluppatori, quindi ha fornito alcune scorciatoie per creare gestori di eventi, con questo non dobbiamo fare la dichiarazione completa come abbiamo visto nella parte precedente, ma applichiamo queste scorciatoie direttamente al selettore.
Vediamo alcune delle scorciatoie più interessanti utilizzate dagli sviluppatori, va precisato che non è l'elenco completo di quelle disponibili, per ottenere questo elenco è meglio andare direttamente alla documentazione ufficiale, comunque per iniziare un po' il oggetto, questi sono più che sufficienti.
pronto ()Viene eseguito quando tutti gli elementi del documento SOLE vengono caricati, cioè quando il sito è pronto, da cui il nome. Va notato che questo è un evento di sistema.
Invia ()Succede quando facciamo un invio del moduloLa cosa interessante è che quando si verifica il modulo, non sta inviando nel modo tradizionale, ma piuttosto aspettando ciò che questo evento gli dice, quindi possiamo usarlo come punto intermedio per le convalide dei campi per citare un esempio del suo utilizzo.
fare clic su ()Funziona quando l'utente lo fa clic con il puntatore del mouse su un elemento, può provenire da un campo di tipo di input, per includere elementi come o le ancore . Come potremmo dire è un evento attivato dall'utente.
sfocatura ()Si verifica quando l'elemento su cui ci troviamo in questo momento non è a fuoco, ad esempio stiamo scrivendo in un campo di testo e passiamo a un campo successivo, in questo caso il primo campo ha perso il focus e questo evento viene eseguito.
messa a fuoco ()Contrariamente all'evento precedente, questo si verifica proprio quando ci concentriamo su un elemento.
librarsi ()Questo evento si verifica quando passiamo il puntatore del mouse su un elemento del SOLE, di solito può essere applicato a e ancore .
Selezionare ()Si verifica quando selezioniamo un elemento all'interno di un campo SelezionareAd esempio abbiamo un elenco a discesa e scegliamo un elemento dal suo contenuto.
Cambia ()Si verifica quando il valore o lo stato di un elemento cambia, ad esempio all'interno di un campo Selezionare, quando cambiamo l'opzione che vediamo riflessa lì.
Poiché sappiamo un po' degli eventi più utilizzati, genereremo un piccolo documento che ne mette in pratica alcuni, nella loro sintassi completa o con esempi, in modo da poter sperimentare entrambe le forme.
Nel codice seguente vedremo come inizialmente scriveremo con console.log() quando abbiamo il documento in pronto (), quindi applicheremo un altro messaggio quando passiamo il mouse su a per confermare come funziona passa il mouse, finalmente vedremo come si usa fare clic su () sì messa a fuoco () per visualizzare altri messaggi. Diamo un'occhiata al codice che descrive quanto sopra:

 Esempio di evento 1
Passa il mouse su questo Div!!

Scrivi qualcosa qui:
Concentrati su di me:
$ (document) .ready (function () {console.log ("L'evento ready si è verificato !!");}); $ ("# evento al passaggio del mouse") hover (funzione () {console.log ("evento al passaggio del mouse avvenuto!");}); $ ("# evento Click"). click (function () {console.log ("abbiamo attivato un evento Click INGRANDIRE
Questo accade quando vogliamo che un elemento abbia diversi eventi associati, in questo modo possiamo organizzare meglio il nostro codice e fornire più funzionalità al nostro elemento.
Ci sono due possibilità, eseguire la stessa azione per più eventi o eseguire un'azione diversa per ognuno, in qualunque modo vogliamo dovremo utilizzare la sintassi completa, la prima che abbiamo già definito all'inizio.
Vediamo come collegare diverse azioni a diversi eventi per lo stesso elemento. Per questo dobbiamo usare una sintassi di base come la seguente:

 $ (selettore) .on ({NomeEvento1: funzione () {…}, NomeEvento2: funzione () {…}}); 

Come possiamo vedere, quando usiamo questa forma di sintassi, evitiamo di dover fare qualcosa del genere:

 $ (selettore) .ShortcutEvent1 (funzione () {}); $ (selettore) .ShortcutEvent2 (funzione () {}); 

Ciò che ci consente di essere più organizzati, tuttavia, sono validi entrambi e spetta allo sviluppatore applicare quello che più gli si addice.
Poiché sappiamo come collegare più eventi a un elemento, lo metteremo in pratica, selezioneremo gli eventi fare clic su () sì messa a fuoco () Per questo esempio, li applicheremo a due elementi, nel primo elemento genereremo la stessa risposta per ciascuno di essi e nel secondo ogni evento avrà la sua risposta. Vediamo il codice che dobbiamo eseguire per raggiungere il nostro obiettivo:

 Esempio di evento 2
Stesso risultato più eventi:

Risultati diversi per evento:
$ ("# elemento1"). on ("click focus", function () {console.log ("mostriamo lo stesso per 3 eventi!");}); $ ("# elemento2"). on ({click: function () {console.log ("abbiamo fatto clic su element2");}, focus: function () {console.log ("ci siamo concentrati su element2 ");}}); 

Qui vediamo che dobbiamo stare attenti con la seconda forma di risposte diverse per eventi diversi, poiché gli eventi non vanno tra virgolette come quando lo facciamo nella prima forma, anche che dobbiamo racchiudere tra parentesi {} tutto all'interno del metodo .sopra (), questo è un errore che può verificarsi molto spesso quindi con questa precauzione possiamo evitarlo. Ora vediamo come appare il nostro esempio quando lo eseguiamo nel nostro browser:

INGRANDIRE
Notiamo il contatore con a numero 2 quando si verificano gli eventi sul primo elemento, significa che abbiamo eseguito la stessa azione due volte come avevamo pianificato. Nel secondo elemento notiamo che stampiamo le due determinate azioni nella console, anche se vediamo anche che si verificano in un ordine diverso da quello in cui le abbiamo posizionate, questo perché l'evento di messa a fuoco accade prima del clic nella gerarchia degli eventi, specialmente se usiamo la chiave TAB per spostarsi tra i campi.
Alla fine di questo tutorial abbiamo imparato come iniziare nel mondo della gestione degli eventi con jQueryQuesto è solo un apri bocca, tuttavia con queste piccole funzionalità possiamo ottenere molte cose nelle nostre applicazioni.

Questo tutorial ti ha aiutato?
Altrimenti

AIUTA A MIGLIORARE QUESTO TUTORIAL!
Pensi di poter correggere o migliorare questo tutorial? Puoi inviare la tua Edizione con le modifiche che ritieni utili.
0 utenti hanno modificato questo tutorial. Modifica e diventa un esperto riconosciuto!
Modifica questo tutorial

TUTORIAL SIMILI

Come trascinare e catturare immagini con l'interfaccia utente di JQueryCome creare uno Spinner o caricare un'icona con JQueryPlugin e librerie JQuery per lo sviluppo webGriglia dinamica Flexigrid con JQuery e PHPGestione JSON con Node.jsGestione degli eventi in Node.jsGestione dei buffer in Node.jsEspressioni regolari con Jquery
Nessun commento, sii il primo!
Non aspettare oltre ed entra in SolveticLascia i tuoi commenti e sfrutta l'account utente Unisciti a noi!

Crea un accountIscriviti GRATIS per avere il tuo account SolveticRegistra un account
IdentificareHai già un account? Accedi quiIdentificami nel mio Account




Informazione

 Pubblicato 12 dic 2014 14:44
 Aggiornato 14 dic 2014 05:44
 visite 3,7 K
 LivelloProfessionale


Ultimi tutorial JavaScript

Come aggiornare NPM con PowerShell in Windows 10
Come trascinare e catturare immagini con l'interfaccia utente di JQuery
Come creare uno Spinner o caricare un'icona con JQuery
Come far tradurre un sito web in più lingue

Vedi di più su JavaScript