Come funziona il meccanismo di jQuery dei gestori di eventi

1

Ho bisogno di ampliare la mia prospettiva sulle librerie del framework, per essere in grado di fare scelte consapevoli di se / che / quando aggiungere un framework a un sito web.

Una cosa che ha attirato la mia attenzione sono stati i gestori di eventi, in quanto sembrano essere strutturati in qualche modo più complessi.

Per me, all'inizio, un gestore di eventi è stato aggiunto in linea con il suo elemento <a onclick="DoSomething();">...</a>

Successivamente sono stati rimossi dall'essere in linea e aggiunti globalmente document/element.onlick = "DoSomethingOnClick o document/element.onlick = "function() {...}

Ad oggi, i framework aggiungono il loro meccanismo sopra e sto cercando di capire cosa / come questo significhi realmente / che sia fatto.

Studiando le parti di codice mi sembra, e qui descriviamo in un modo MOLTO semplice, che aggiungono l'evento onclick simile a quello sopra globale e quindi passano l'evento quando generato, nel proprio gestore, che a sua volta è un struttura dell'oggetto contenente funzioni ed elementi memorizzati e aggiunti e le loro relazioni.

Questa è una osservazione corretta? Se no, allora come è fatto?

Questo può essere mostrato con un semplice esempio scritto in Javascript?

Basato sulla seguente citazione,

"You can use the jQuery on method to attach an event handler to the document, and pass it a filter string that will cause your handler only to fire when the event happens on an element that match the filter, and with the matched element as this value."

in che modo l'elemento che ha attivato l'evento è stato identificato nel gestore (dall'oggetto evento o?) e come vengono memorizzati / identificati gli elementi da salvare?

Gli altri framework, oltre a jQuery, hanno una struttura molto diversa della loro implementazione dei gestori di eventi?

    
posta LGSon 06.03.2014 - 07:51
fonte

1 risposta

3

jQuery ha una coda interna di tutti i gestori che ha allegato per un particolare evento su un particolare elemento. La prima volta che si associa un evento a quell'elemento, viene inizializzata la coda e viene utilizzato addEventListener per associare l'evento alla funzione generica di gestione degli eventi di jQuery. Quando l'evento viene attivato, la funzione utilizza event.target per determinare quale elemento è, quindi trova la coda dei gestori associati e chiama in sequenza.

Il metodo di delega on è nidificato in cima a questo. Si avvale di bubbling di eventi : quando si verifica un evento, viene attivato sullo specifico elemento di destinazione e anche su tutti gli elementi che lo contengono. Si associa il gestore a un contenitore e si salva la stringa del selettore nella voce della coda. Quando elabora quella voce nella coda del gestore, verifica se event.target (che è ancora l'elemento specifico su cui si è fatto clic) corrisponde al selettore e quindi esegue la funzione del gestore. Questo meccanismo consente di associare i gestori per elementi che non sono stati ancora aggiunti al DOM; è particolarmente utile quando hai un elenco di elementi che vengono aggiornati dinamicamente (ad esempio aggiungendo righe a una tabella).

    
risposta data 07.03.2014 - 07:34
fonte

Leggi altre domande sui tag