jQuery Tutorial (Parte 4) - Ascoltatori di eventi

Oggi andremo a dare una svolta e mostreremo davvero dove jQuery brilla - eventi. Se hai seguito le esercitazioni precedenti, ora dovresti avere una conoscenza abbastanza buona della struttura di base 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 puoi fare per manipolarli Introduzione a jQuery (Parte 2): Metodi e funzioni Introduzione a jQuery (Parte 2): Metodi e funzioni Questa è una parte dell'introduzione dei principianti 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 tutto ciò che è di fantasia.

Comunque è un evento?

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 a “ascolta”, e quando quell'evento viene attivato, possono reagire in qualche modo.

Ad esempio, toccando sullo schermo del tuo iPhone genererà un singolo “tocca l'evento” 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 uno specifico “pulsante” - puoi collegare un listener di eventi a qualsiasi cosa sullo schermo, ma come sviluppatore web, ovviamente, devi renderlo intuitivo. Creazione di uno pseudo-pulsante fuori dalla lettera un nascosto all'interno di un paragrafo di testo è possibile, 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 (eventi, azioni);

Per ascoltare per “clic” evento su qualsiasi elemento con la classe .cliccami, e quindi registrare un messaggio nella console che contiene il testo dell'elemento cliccato, dovresti fare:

$ (". 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 il 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 (evento); event.preventDefault (); return false;);

Alcuni cambiamenti qui - in primo luogo, ci stiamo associando al Sottoscrivi evento invece di clic. Questo è più appropriato quando si ha a che fare con un modulo come l'utente potrebbe tab-spazio, colpire accedere, o colpisci a Sottoscrivi pulsante: tutti attivano l'azione predefinita del modulo. Stiamo anche passando la variabile evento nella funzione anonima, quindi possiamo fare riferimento a dati dell'evento. Abbiamo quindi usato il event.preventDefault () in combinazione con restituisce falso per interrompere tutte le azioni abituali dal completamento.

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 a “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 è stata 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 permette 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

Scopri di più su: JavaScript, jQuery, programmazione, sviluppo Web.