jQuery Tutorial (Parte 4) - Ascoltatori di eventi

Annuncio pubblicitario

Oggi faremo un salto di qualità e mostreremo davvero dove jQuery brilla - gli eventi . Se hai seguito le esercitazioni precedenti, ora dovresti avere una buona comprensione della struttura di base del codice di jQuery Tutorial jQuery - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di quanto sia importante jQuery a qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po 'di codice e abbiamo imparato come ... Leggi di più (e tutte le orribili parentesi graffe che accompagnano), così come come trovare gli elementi del DOM e alcune cose che può fare per manipolarli Introduzione a jQuery (Parte 2): Metodi e funzioni Introduzione a jQuery (Parte 2): Metodi e funzioni Questo fa parte dell'introduzione di un principiante alla serie di programmazione web jQuery. La prima parte riguardava le nozioni di base di jQuery su come includerla nel tuo progetto e selettori. Nella parte 2, continueremo con ... Per saperne di più. Ti ho anche mostrato come accedere alla console per sviluppatori in Chrome Figure Out Problemi del sito web con gli strumenti per sviluppatori di Chrome o Firebug scoprire i problemi del sito web con gli strumenti per sviluppatori di Chrome o Firebug Se hai seguito i miei tutorial su jQuery finora, potresti aver già incontrato alcuni problemi di codice e non so come risolverli. Di fronte a un bit di codice non funzionale, è molto ... Leggi di più e come potresti usarlo per eseguire il debug del tuo codice jQuery.

Gli eventi, tra gli altri usi, ti consentono di reagire alle cose che accadono nella pagina e alle interazioni degli utenti: fare clic, scorrere e tutte quelle cose di fantasia.

Che cos'è un evento comunque?

Per chi è nuovo alla programmazione che implica un'interfaccia grafica di qualche tipo, gli eventi si riferiscono a qualsiasi tipo di interazione tra l'utente e l'applicazione; o può essere generato internamente da qualche altro processo. Le applicazioni scelgono quali eventi "ascoltare" e quando quell'evento viene attivato, possono reagire in qualche modo.

Ad esempio, toccando sullo schermo del tuo iPhone genererà un singolo "tap event" con una coordinata x, y esattamente dove hai toccato. Se hai toccato un particolare oggetto, come un pulsante, è probabile che il pulsante stia ascoltando quell'evento e eseguirà alcune azioni di conseguenza. Se si trattasse solo di una parte vuota dell'interfaccia, nulla è stato associato all'evento e quindi non accadrà nulla.

Trascinare il dito sullo schermo genererebbe un altro evento, uno che include informazioni sul punto iniziale e finale del movimento di trascinamento e forse sulla velocità. Gli eventi ci forniscono un modo semplice per reagire alle cose che accadono .

Facile: facendo clic

Forse l'evento più semplice da ascoltare è l'evento click, attivato ogni volta che un utente fa clic su un elemento. Questo non deve essere un "pulsante" specifico: puoi collegare un listener di eventi a qualsiasi cosa sullo schermo, ma come sviluppatore web, ovviamente, devi renderlo intuitivo. È possibile creare uno pseudo-pulsante fuori dalla lettera nascosto in un paragrafo di testo, ma in qualche modo stupido.

I metodi per collegare un listener di eventi sono cambiati significativamente nel corso degli anni come jQuery ha sviluppato, ma questo è il metodo accettato corrente, usando on ():

$(selector).on(event, action); 

Per ascoltare un evento di "clic" su qualsiasi elemento con la classe .clickme e quindi registrare un messaggio nella console contenente il testo dell'elemento su cui si fa clic, si farebbe:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

Dovresti essere in grado di vedere che l'azione che abbiamo incorporato qui è una funzione anonima che usa questo selettore (che si riferisce a qualsiasi oggetto al quale attualmente si sta occupando jQuery) - in questo caso, la cosa su cui è stato fatto clic. Quindi estraiamo il testo di quell'oggetto cliccato e lo registriamo alla console. Facile, giusto?

Arresta l'azione predefinita:

Ad un certo punto, ti consigliamo di allegare a qualcosa come un link o modulo pulsante di invio che di solito fa qualcos'altro. In tal caso, è molto probabile che tu non voglia che l'azione originale venga eseguita, invece, vuoi fare un po 'di fantasia AJAX o magia jQuery speciale.

Per evitare che quell'azione predefinita si verifichi, abbiamo un pratico metodo chiamato preventDefault. Ovviamente. Vediamo come funzionerebbe quando si ha a che fare con un pulsante di invio per un modulo

 $("#myForm").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Alcune modifiche qui: in primo luogo, stiamo collegando l'evento di invio anziché il clic. Questo è più appropriato quando si ha a che fare con un modulo dato che l'utente potrebbe tab-space, premere invio o premere un pulsante di invio : tutto ciò determinerebbe l'azione predefinita del modulo. Stiamo anche passando la variabile evento nella funzione anonima, quindi possiamo fare riferimento ai dati dell'evento . Abbiamo quindi utilizzato event.preventDefault () in combinazione con return false per impedire il completamento di tutte le azioni abituali.

In questo caso, è solo la registrazione dell'evento alla console, ma in realtà probabilmente avresti un gestore AJAX qui, che affronteremo nella prossima lezione.

Anche gli eventi possono essere innescati da te

Negli ultimi due esempi, abbiamo utilizzato il metodo on per ascoltare un evento, ma puoi anche attivare manualmente un evento chiamandolo come metodo. È difficile capire perché potresti usare questo per forzare un "clic", ma ha più senso se guardiamo all'evento focus.

Focus viene in genere utilizzato con i campi di input per attivare un messaggio quando l'utente fa clic nella casella per inserire il testo, ad esempio un messaggio informativo nel formato da utilizzare. Ma potresti anche usarlo per forzare l'utente nel campo del nome utente quando la pagina è caricata, in modo che possano immediatamente iniziare a digitare i loro dettagli di accesso.

 $(document).ready(function(){ $('#username'.focus(); }); 

Se hai anche collegato un listener di eventi di attivazione a quel campo del nome utente, verrebbe attivato anche quando hai forzato lo stato attivo. Gli eventi possono quindi essere sia attivati ​​che ascoltati.

Per ora, esercitati collegandoti a vari eventi nella pagina, puoi trovare un elenco completo di tutti gli eventi disponibili qui - ricorda di utilizzare preventDefault se si tratta di un collegamento o di un pulsante e di vedere quale output ottieni dalla console sui dati degli eventi.

Lo lascerò lì oggi mentre ci avviciniamo alla fine di questa mini-serie di tutorial su jQuery. Dovresti, alla fine, essere abbastanza sicuro da gettare un po 'di jQuery sulla tua pagina e fargli fare qualcosa. La prossima settimana vedremo AJAX - una parte importante del web moderno che ti consente di caricare e inviare richieste in background senza interrompere l'utente.

Come sempre, feedback, domande, commenti e problemi sono i benvenuti qui sotto.

Credito immagine: touchscreen tramite Shutterstock