jQuery 4 e il suo sistema di eventi spiegati in fondo

Casa » Python » jQuery 4 e il suo sistema di eventi spiegati in fondo

jQuery 4 è dotato di un sistema di eventi molto più in linea con gli standard moderni del navigatore, ma senza rinunciare alla filosofia classica della libreria: scrivi meno, fai di più. Se mantieni le applicazioni con un bastante codice jQuery, capisci bene come hanno evoluti gli eventi, perché le tue interfacce si sentono veloci, predecibili e facili da pulire.

In fondo, il sistema di eventi di jQuery 4 non è un semplice ambiente di addEventListener, ovvero una capacità che normalizza i comportamenti tra i navigatori, rafforza la sicurezza, mantiene un ordine di esecuzione chiaro e offre strumenti potenti come la delega di eventi e l'integrazione con le API moderne del navigatore. Dobbiamo descrivere tutto questo con calma, dalla base degli eventi in JavaScript fino a quando questa versione cambia effettivamente.

JavaScript come linguaggio diretto per eventi

JavaScript viene eseguito su un unico hilo, ma l'ambiente del navigatore è completamente dominato dagli eventi: clic del mouse, movimenti, pulsazioni del testo, carico delle risorse, modifiche alla formula, ecc. Ciascuna di queste azioni genera un segnale discretamente associato a un nodo concreto del DOM.

Un evento non è qualcosa di globale che si verifica in tutta l'interfaccia, ma scompare sempre su un elemento specifico. Un clic su un pulsante visualizza un evento clic su quel pulsante, non sul documento in questione. A questo evento è possibile associare una funzione gestore (gestore eventi) che verrà eseguita quando il navigatore esegue questo processo.

Come il motore di JavaScript esegue da solo un'istruzione alla volta, fa fallire una serie di attività per coordinare gli eventi. Quando si verifica qualcosa di interessante —por ejemplo, el usuario pulsa una tecla— el navegador coloca ese evento en una coda di spedizione (cola de despacho). Quando la pila di chiamate è libera, il motore toglie il prossimo evento della cola, lancia il conducente associato fino alla fine e da solo vorrai guardare se ci sono altri eventi in sospeso.

Un dettaglio utile, ma è importante che un evento entri solo nella cola se esiste almeno un gestore registrato per lui. Si no hay nadie escuchando, el navegador semplicemente desecha el suceso. Questo spiega perché un'interfaccia può sembrare “morta” se olvidamo registriamo un ascoltatore per l'interazione che speriamo.

Da questa architettura deriva la chiamata “regola della capacità di risposta”: como el hilo principal está ocupado mientras corre tu manejador, si este tarda demasiado, todo el sitio parece congelado. Le animazioni si parano, i clic sembrano non rispondere e l'esperienza dell'utente cade in picado.

La strategia corretta in JavaScript fa sì che ogni gestore faccia il minor lavoro possibile e svolga il controllo quanto prima. Se è necessario molto tempo di CPU (ad esempio, per elaborare un set di dati di grandi dimensioni), è necessario occuparsi del lavoro in piccole quantità —di decine di milioni— e distribuirlo con setTimeout, requestAnimationFrame o lavoratori, in modo che il navigatore possa elaborare altri eventi tra i media.

Eventi in HTML puro e addEventListener

Prima di capire cosa importa jQuery 4, è possibile eseguire la riparazione come gestire eventi con JavaScript nativo. HTML consente di definire i gestori degli attributi su*, come onclick=”miFuncion()” su un pulsante, ma questa è un'approssimazione della struttura mista (HTML) con il comportamento (JS) e rende il codice difficile da mantenere.

La forma moderna è quella di utilizzare addEventListener direttamente sui nodi del DOM. Ad esempio, un pulsante può registrare vari gestori per lo stesso tipo di evento:

In questo modello, il primo argomento di addEventListener è il tipo di evento come cadenza —click, mouseover, keydown, ecc.— e il secondo è un riferimento alla funzione. Secondo le specifiche, se si registrano vari ascoltatori, è necessario eseguirli nell'ordine in cui si aggiungono, anche se in ambienti antichi non è sempre possibile fidarsi di questa matiz per la logica critica.

Un altro vantaggio dell'API nativa è che puoi aiutare di più un gestore alla stessa origine dell'evento. È totalmente valido avere una funzione per salvare i dati e un'altra indipendente per registrare dati analitici, ambedue scomparse dallo stesso clic. Esto ayuda a separar responsabilidades sin acoplar funcionalidades que no tienen por qué estar mezcladas.

Il problema storico è che nessuno dei navigatori ha implementato gli eventi esattamente uguali. Gli antichi Internet Explorer utilizzano attachEvent al punto di addEventListener, alcuni eventi non si verificano dove devono essere e alcuni dettagli come l'ordine di messa a fuoco e sfocatura variano. Questo caos di compatibilità è uno dei motivi per cui jQuery è così popolare: offrire un capo uniforme per tutto ciò che è raro.

Il sistema di eventi di jQuery e il metodo .on()

Da jQuery 1.7 e consolidato in jQuery 4, il cuore del sistema di eventi della libreria è il metodo .on(). Anche se esistono attacchi come click(), hover() o bind(), poi tutto termina delegando su .on(), che è l'API unificata per il registrar degli ascoltatori.

.on() accetta varie combinazioni di argomenti consentite dal caso semplice fino a scenari complessi. El patrón más básico es:

In questa azienda, il primo parametro è una stringa con uno o vari tipi di eventi separati da spazi, il secondo è il manejador. jQuery richiamerà questa funzione ogni volta che l'azione avviene sugli elementi selezionati, passando sempre per un oggetto di evento normalizzato.

La vera potenza di .on() appare quando aggiungiamo un selettore intermedio per delegare eventi. In questo caso, la forma generale è:

Quando usiamo questa variante, il manejador non si aggiunge direttamente a ogni elemento hijo, ma a un antenato comune. jQuery approva il bubbling del DOM: el evento se origina en el elemento objetivo, asciende por sus padres y, cuando alcanza el nodo donde se hizo .on(), se comprueba si event.target coincide con el selector delegato. Si coincide, se ejecuta el handler.

Inoltre, .on() può ricevere un oggetto dove le chiavi sono cadenze di eventi e i valori sono funzioni. Questo permette di registrare vari ascoltatori da una sola volta su los mismos elementi, mantenendo il codice più compatto ed espressivo.

Questo design ha un'altra caratteristica interessante: è possibile inserire dati statici nella registrazione dell'evento utilizzando il parametro dati. jQuery incapsula queste informazioni in event.data ogni volta che scompare il gestore, in modo da facilitare il riutilizzo di una stessa funzione con comportamenti leggermente distinti senza dover creare porte ad hoc.

L'oggetto dell'evento di jQuery e il controllo del flusso

Ogni volta che jQuery esegue un gestore, il passaggio come argomento è un oggetto dell'evento proprio per normalizzare le differenze tra i navigatori. Questo oggetto include informazioni essenziali: il tipo di evento in event.type, l'elemento da cui ha avuto origine in event.target e un riferimento all'evento nativo in event.originalEvent.

In modo predefinito, la maggior parte degli eventi del DOM si propagano fino all'arrivo dell'elemento originale fino al documento. In ogni passaggio, jQuery controlla quali gestori coincidono e li eseguono nell'ordine in cui sono stati registrati. Este comportamiento hace posible tanto la delegación como la composición de funcionalidades sobre el mismo suceso.

Se vuoi trattenere la propagazione in modo che l'evento non si svolga attraverso l'albero DOM, puoi chiamare event.stopPropagation(). Con questo, evitare che altri elementi precedenti ricevano la notifica e agiscano di conseguenza, qualcosa di molto utile quando non si desidera che la logica generica del contenitore si applichi in un caso particolare.

C'è un secondo livello di controllo con event.stopImmediatePropagation(). Oltre a frenare il gorgoglio, questa chiamata impedisce che vengano eseguiti altri gestori dello stesso tipo registrati nello stesso elemento. È la soluzione più drastica per garantire che nessuna altra funzione interferisca in un flusso critico.

D'altro canto, event.preventDefault() annulla l'azione per difetto associata all'evento. Ad esempio, evitare che un collegamento vada a un altro URL o che venga inviato un formulario. Questa tecnica è fondamentale per gli utenti come l'invio da parte di AJAX, dove vuoi catturare l'invio, annullare il comportamento standard e lanciare la tua petizione asincrona.

Un classico attacco di jQuery è devolver false dal gestore. Questa rotazione equivale a invocare tanto preventDefault() come stopPropagation(), combinando la cancellazione dell'azione per difetto con il blocco della propagazione. È comodo, ma conviene usarlo solo quando hai realmente bisogno di due cose alla volta.

Nel contesto di jQuery, la parola chiave this all'interno del gestore punta all'elemento in cui le stai inviando l'evento in quel momento. Negli eventi diretti, suole è il nodo in cui è registrato l'ascoltatore; nei delegati, sarà un elemento che coincide con il selettore delegato, che non può coincidere con event.target se il successo è scoppiato da un discendente profondo.

Passare i dati ai gestori e riutilizzarli

jQuery consente di arricchire le informazioni sull'evento aggiungendo dati arbitrari nel registro con .on(). Se viene fornito un terzo parametro di dati che non è nullo o indefinito, jQuery lo inserisce in event.data ogni volta che il gestore viene eseguito.

Il consiglio abituale è utilizzare un oggetto piano come contenitore, ad esempio { action: “save”, tracking: true }, poiché è possibile aggiungere vari valori sotto uno stesso parametro e accedervi per proprietà. Questo ha il codice più leggibile che passa una semplice cadenza.

Dalle versioni precedenti di jQuery 4, uno stesso gestore può leggere diverse volte lo stesso elemento. Ogni busta può contenere il proprio pacchetto di eventi.data, in modo che la stessa funzione agisca in modo leggermente distinto a seconda del contesto in cui è stata registrata. È un modo elegante per applicare il principio DRY nella logica degli eventi.

Oltre ai dati statici, jQuery offre un altro canale per visualizzare informazioni dinamiche durante la rimozione di eventi in forma manuale. I metodi .trigger() e .triggerHandler() accettano un secondo argomento che può essere un valore semplice o un array; jQuery trasformerà questo valore o ogni elemento dell'array in parametri aggiuntivi del gestore, proprio dopo l'oggetto dell'evento.

Quando si combinano event.data e gli argomenti di .trigger(), si ottiene un sistema molto flessibile per costruire API interne basate su eventi. È possibile utilizzare event.data per la configurazione dell'ascoltatore e i parametri aggiuntivi per le variabili dei dati in ogni chiamata programmatica.

Delegazione di eventi: prestazioni e scalabilità

Una delle tecniche più potenti del sistema di eventi di jQuery è la delega che si rivolge direttamente al bubbling del DOM. Mentre aggiungi un ascoltatore a ogni elemento potenzialmente interattivo, registra una sola volta su un contenitore comune e lascia che l'evento sia iniziato fino a lui.

Questo modello brilla in strutture grandi o dinamiche. Immagina una tabella con milioni di persone: registrare milioni di gestori individuali per gestire un clic su ciascuno è un carico notevole, tanto per memoria quanto per lavoro di confronto allo spargimento di eventi. In cambio, se si inserisce un ascoltatore solista nella tabella o nel corpo e si filtra tramite il selettore adatto, si riduce drasticamente il costo.

La delega semplifica anche l'interazione con i contenuti che vengono generati o modificati tramite AJAX. Se si aggiungono nuovi file alla tabella dopo aver caricato la pagina, non è necessario tornare a ricorrere al DOM per aiutare i gestori a ogni singola creazione: l'ascoltatore delegato seguirà funzionando perché escucha en el antenato, non nei nodi concreti.

Questo sì, per mantenere una prestazione ottimale conviene selezionare con attenzione il punto in cui si aggiunge l'evento delegato. Quanto più arrivi sull'albero delle mele, più lungo sarà il cammino del burbujeo e maggiore il numero di confronti di selettori che jQuery deve fare. In documenti di grandi dimensioni, utilizzare documenti o enti come delegati universali può essere costoso per i successi ad alta frequenza.

Nei termini dei selettori, jQuery procede molto rapidamente con i semplici passaggi del formato tag#id.class. Espressioni come #myForm, a.external o il pulsante vengono valutate con molta efficienza. In cambio, selettori generici complessi —ad esempio, combinazioni profonde discendenti— possono essere vari volte più lenti, anche se nella maggior parte delle applicazioni successive sono perfettamente utilizzabili.

È necessario tener conto anche del fatto che non tutti gli eventi sono adatti per la delega. Alcuni, come caricare, scorrere o errore nelle immagini, non si gonfiano nei navigatori, e quindi funzionano solo se los adjuntas direttamente all'elemento origen. jQuery introduce eventi come focus e focusout per offrire alternative a focus e sfocatura, ma ci sono categorie — ad esempio, alcuni eventi del formulario nell'antico IE — dove la delega ha limitazioni storiche.

Visualizzazione di eventi in jQuery 4

Nella maggior parte dei casi, eventi come il clic o il cambiamento si verificano con poca frequenza, in modo che la prestazione non sia solo un problema. Tuttavia, esistono tipi molto ruidosi —muovi il mouse, scorri, ridimensiona— che possono dispararsi documenti a volte al secondo, e ahí sì merece la pena ser cuidadoso con la quantità e il costo dei tuoi manejadores.

La prima regola per questi eventi ad alta frequenza è ridurre al minimo il lavoro di richiamata. Consente di precalcolare e memorizzare valori che si ripetono molto, limitare le operazioni sul DOM e, quando necessario, introdurre tecniche di throttling o debouncing con setTimeout, requestAnimationFrame o librerie ausiliarie, e controllare il comportamento dello scroll con la proprietà CSS overflow.

Un secondo aspetto da vigilare è il numero dei gestori delegati registrati vicino alla radice del documento. Ogni volta che si verifica un evento, jQuery deve recuperare tutti gli ascoltatori potenziali per questo tipo, ripetere la sequenza di ascesa dal target fino al nodo radio e verificare i selettori associati. Un eccesso di gestori generici allegati al documento può convertirsi in un cucchiaio di bottiglia.

La soluzione passa per annunciare la delega il più vicino possibile agli elementi dell'obiettivo. Se sai che solo te sono eventi interessanti in un formulario concreto, è meglio delegare in quel formulario quello presente nel corpo. In questo modo, il numero di elementi per cui l'evento è minore e il costo della valutazione si riduce.

jQuery 4 mantiene la filosofia di accelerare i selettori utilizzati in delega. Quando si inserisce, un selettore come pulsante all'interno di un contenitore specifico sarà notevolmente più efficiente rispetto alle espressioni profondamente anidate. A menudo basta ripiantare dove posizionare l'ascoltatore per semplificare molto il selettore necessario.

Compatibilità con eventi, casi speciali e note importanti

Il sistema di eventi di jQuery si basa sulla capacità di associare metadati interni agli elementi del DOM. Ciò consente alla libreria di ottenere un registro dettagliato di ciò che i gestori sono aggiunti a ciascun nodo, gestire spazi dei nomi, supportare .off() in forma precisa, ecc. Tuttavia, alcuni elementi —come oggetto, incorporamento e applet— non ammettono l'aggiunta di dati nel formato jQuery necessario, poiché la libreria non può inviare eventi e ciao.

Esistono anche particolarità con alcuni tipi di eventi dopo il navigatore. In tutti, carica, scorri ed esegui errori nelle immagini senza burbujean, quindi non potrai delegarlo; su Internet Explorer 8 e precedenti, quindi farlo incollare o ripristinare. Anche se jQuery intende fornire alternative compatibili, questi limiti del modello di eventi del navigatore continuano a stare lì.

Un caso noto è window.onerror, a causa degli argomenti contrari e il valore della risposta è diverso rispetto agli eventi standard. Per questo jQuery non lo astrae attraverso il tuo sistema e consiglia di assegnare il gestore direttamente sulla proprietà window.onerror quando è necessario catturare errori globali.

Un'altra cosa importante è che l'elenco dei gestori che verrà utilizzato per un elemento verrà fissato nel momento in cui l'evento inizierà a svolgersi. Se all'interno di un callback chiama .off() per uscire da un ascoltatore, questa modifica non influenzerà i gestori già programmati per l'esecuzione attuale: l'eliminazione avrà effetto solo nelle invocazioni future. Per tagliare il resto delle callback sullo stesso elemento e tipo di evento nel ciclo attuale, è necessario stopImmediatePropagation().

Nei termini dell'API, jQuery ha ido deprecando atajos poco chiari come lo pseudo-evento “hover” usato come alias di mouseenter e mouseleave. Nelle versioni precedenti veniva utilizzato "hover" come nome del gruppo, ma ciò causava confusione con il metodo .hover(). In jQuery 4 si esalta l'uso esplicito di mouseenter e mouseleave o del metodo .hover() con le sue due funzioni quando si sente.

Cosa cambia realmente in jQuery 4 riguardo agli eventi

jQuery 4 segnala un punto di flessibilità per ridurre la dipendenza dai comportamenti ereditati dai navigatori antichi. A livello di eventi, questo viene tradotto in modo che il modello sembri familiare, ma si adatta più strettamente alle specifiche attuali del DOM.

Uno dei cambiamenti più utili deve essere visualizzato con l'ordine e il modo di eventi di messa a fuoco, come messa a fuoco, sfocatura, messa a fuoco e messa a fuoco. Storicamente, jQuery applicava normalizzazioni per registrare risultati coerenti anche nei navigatori con implementazioni peculiari. Nella versione 4 la libreria è più allineata allo standard W3C, poiché il codice che dipende dalle specifiche vie potrebbe comportarsi in modo diverso.

Altro aspetto chiave è l'eredità del supporto per i navigatori. jQuery 4 deja atrás Internet Explorer 10, Edge Legacy e mobili molto antichi, concentrati su uno stile di base moderno. IE11 figura ancora come supportato, ma tutto punta a essere un supporto di transizione. Una volta scomparsa la necessità di soluzioni alternative per queste piattaforme, il nucleo degli eventi può essere più leggero e diretto.

Questa pulizia è accompagnata da un aggiornamento interno del codice. La libreria adotta gli utenti più vicini al JavaScript attuale, con pacchetti meglio integrati in strumenti come Vite, Rollup o webpack. Anche se questo non cambia direttamente come lama .on() o .off(), ha effetto su come ottenere jQuery in ambienti modulari e bundler moderni.

Nella build slim, jQuery 4 ha raccolto ancora di più. Ha eliminato i differiti e le richiamate a favore dell'utilizzo delle promesse native di JavaScript, in modo che si incastrino meglio nell'ecosistema attuale. Anche se questo influisce su tutta la parte di sincronizzazione e AJAX, pulisce anche i frammenti di codice storico che interagiscono con eventi di forma indiretta.

Questo allineamento agli standard fa anche riferimento alla previsibilità del sistema di eventi. Per mantenere comportamenti non standard in termini di compatibilità con i navigatori già obsoleti, jQuery 4 può rispettare la semantica definita dal W3C, che facilita il ragionamento sul flusso di eventi, la propagazione e l'ordine di esecuzione quando si combina jQuery con API native moderne.

Sicurezza, tipi attendibili e contesto di eventi

Uno dei grandi progressi di jQuery 4 è nel terreno della sicurezza, soprattutto in relazione alla Content Security Policy (CSP) e ai Trusted Types. Anche se questo non sembra essere direttamente collegato agli eventi, il modo in cui la libreria interagisce con il DOM e il codice dinamico influenzano la superficie dell'attacco.

Trusted Types è una tecnologia pensata per attacchi difficili di cross-site scripting (XSS) obbligando alcuni contesti sensibili (ad esempio, assegnare innerHTML) a ricevere oggetti appositamente contrassegnati come sicuri. jQuery 4 incorpora il supporto per questo meccanismo, che facilita l'integrazione nelle applicazioni che applicano politiche CSP restrittive.

Allineando le tue operazioni con Trusted Types e CSP, jQuery riduce le situazioni in cui un semplice gestore di eventi potrebbe terminare l'introduzione di contenuti insicuri senza che tu te ne accorga. Questo non elimina la necessità di convalidare e sanare i dati, ma fa sì che la libreria si comporti in modo più prevedibile nell'ambiente in cui la sicurezza è una priorità.

Dal punto di vista dello sviluppatore frontend, questo significa che molti utenti classici basati su jQuery continuano ad essere validi nelle applicazioni durature, sempre che si aggiorni alla versione 4 e si adattino le parti che dipendono dalle API obsolete. Tornando agli eventi, questa traduzione può essere seguita utilizzando .on(), delegazioni e sparizioni programmatiche senza compromettere le protezioni moderne del navigatore.

jQuery 4 utilizza JavaScript nativo nel gestore degli eventi

Con le API moderne del navigatore —querySelector, addEventListener, fetch, classList— molte persone si chiedono se jQuery continua a sentire. Tecnicamente, puoi replicare la maggior parte di ciò che crea il sistema di eventi della libreria utilizzando solo JavaScript nativo, e nei nuovi progetti solo essere l'opzione più ragionevole.

Tuttavia, nelle applicazioni esistenti con molto codice jQuery, la storia è distinta. La migrazione del gol a tutto un sistema di eventi che dipende da .on(), delegazioni, plugin e funzionalità specifiche può essere caro e infastidito. jQuery 4 offre la possibilità di modernizzare la base senza dover riscrivere da zero il modello di interazione.

Nei progetti greenfield o framework moderni, aggiungere jQuery solo per gestire gli eventi che sono necessari. La combinazione di addEventListener con utenti come manuale di delega degli eventi e utilizzi leggeri di terzi cubre quasi tutti i casi, con un po' di magia e più controllo spiegato.

La decisione pragmatica di ogni singolo aspetto deve essere mantenere jQuery tutto dove sei già profondamente integrato —ad esempio, in un CMS come WordPress o in applicazioni aziendali enormi— e scrivere un nuovo codice nativo o con framework dove non c'è dipendenza ereditata. In questo scenario misto, jQuery 4 agisce come ponte tra il passato e il presente dell'ecosistema web.

Per chi gestisce basi di codice complesse, comprendere a fondo il sistema di eventi di jQuery 4 è un'inversione utile: ti consente di estrarre la massima partizione da ciò che hai scritto, applicare migliori prestazioni e sicurezza e pianificare una possibile migrazione progressiva alle API native senza dover improvvisare soluzioni a ogni passo.

Nell'ultimo caso, jQuery 4 consolida un sistema di eventi che combina compatibilità, chiarezza e allineamento con gli standard. Se sai apprezzare bene .on(), la delega, il controllo preciso della propagazione e i miglioramenti in termini di sicurezza, puoi continuare a sviluppare e mantenere le interfacce basate su jQuery con piena visibilità nel contesto del frontend attuale.