Tutorial jQuery (parte 4)

Annuncio pubblicitario

Oggi faremo un salto di qualità e mostreremo davvero dove brilla jQuery: eventi. Se hai seguito i tutorial precedenti, ora dovresti avere una buona comprensione di struttura del codice di base di jQuery Tutorial jQuery - Per iniziare: Nozioni di base e selettoriLa scorsa settimana, ho parlato dell'importanza di jQuery per qualsiasi sviluppatore web moderno e del perché sia ​​fantastico. Questa settimana, penso che sia tempo di sporcarci le mani con un po 'di codice e abbiamo imparato come ... Leggi di più (e tutte le orribili parentesi graffe che ne derivano), oltre a come trovare elementi del DOM e alcune delle cose che puoi fare per manipolarle Introduzione a jQuery (parte 2): metodi e funzioniQuesto fa parte di un'introduzione continua per principianti alle serie di programmazione Web jQuery. La parte 1 trattava le basi di jQuery su come includerlo nel progetto e sui selettori. Nella parte 2, continueremo con ... Leggi di più . Ti ho anche mostrato come accedere a

console per sviluppatori in Chrome Capire i problemi del sito Web con Chrome Developer Tools o FirebugSe finora hai seguito i miei tutorial su jQuery, potresti avere già riscontrato alcuni problemi con il codice e non sapere 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 sulla pagina e alle interazioni dell'utente - facendo clic, scorrendo e tutte quelle cose fantasiose.

Che cos'è comunque un evento?

Per i neofiti della programmazione che prevedono 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 l'evento viene attivato, possono reagire in qualche modo.

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

Trascinando il dito sullo schermo si 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: fare clic

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

I metodi per collegare un listener di eventi sono cambiati in modo significativo nel corso degli anni con lo sviluppo di jQuery, ma questo è l'attuale metodo accettato, usando sopra():

$(selettore).sopra(evento,azione);

Per ascoltare un "clic"Evento su tutti gli elementi con la classe .cliccami, e quindi registra un messaggio sulla console contenente il file testo dell'elemento su cui si fa clic, si dovrebbe 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 utilizza Questo selettore (che si riferisce a qualsiasi oggetto con cui jQuery abbia attualmente a che fare) - in questo caso, l'oggetto su cui è stato fatto clic. Quindi estraiamo il testo di quell'oggetto cliccato e lo registriamo sulla console. Facile vero?

Interrompi l'azione predefinita:

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

Per evitare che si verifichi tale azione predefinita, abbiamo un pratico metodo chiamato preventDefault. Ovviamente. Vediamo come funzionerebbe quando si tratta di un pulsante di invio per un modulo

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

Alcune modifiche qui - in primo luogo, ci stiamo allegando al Invia evento anziché clic. Questo è più appropriato quando si tratta di un modulo come l'utente potrebbe tab-spazio, colpire accedereo premi a Invia pulsante: tutto ciò innescherebbe 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 restituire false per interrompere il completamento di tutte le normali azioni.

In questo caso, sta solo registrando l'evento sulla console, ma in realtà probabilmente avresti un gestore AJAX qui, che affronteremo nella prossima lezione.

Gli eventi possono anche essere attivati ​​da te

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

Lo stato attivo viene in genere utilizzato con i campi di input per attivare un messaggio quando l'utente fa clic nella casella per immettere il testo, ad esempio un messaggio di istruzioni sul 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 dettagli di accesso.

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

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

Per ora, esercitati allegando a vari eventi sulla pagina: puoi trovare un elenco completo di tutti eventi disponibili qui - ricorda di utilizzare preventDefault se si tratta di un link o di un pulsante e di vedere quale output ottieni dalla console sui dati dell'evento.

Lo lascerò lì oggi mentre ci avviciniamo alla fine di questa mini serie di tutorial di jQuery. Alla fine, dovresti essere abbastanza sicuro di buttare un po 'di jQuery sulla tua pagina e farlo 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 di seguito.

Credito immagine: Touch screen tramite Shutterstock