Introduzione ai quattro modi di binding degli eventi in jQuery

jQuery offre diversi modi di binding degli eventi, ognuno dei quali ha le sue caratteristiche. Comprendere le differenze tra loro aiuta a fare scelte corrette durante la scrittura del codice, e a scrivere codice elegante e facile da mantenere. Vediamo ora quali sono i modi di binding degli eventi disponibili in jQuery.

jQuery offre quattro modi di binding degli eventi, ovvero bind, live, delegate, on, e le funzioni di rimozione degli ascoltatori corrispondenti sono unbind, die, undelegate, off. Prima di esaminarli

Uno: bind(type, [data], function(eventObject))

bind è uno dei modi di binding degli eventi più utilizzati, il cui scopo è associare funzioni di ascolto di tipo di evento specifico agli elementi selezionati, e i significati dei parametri sono i seguenti:

type: tipo di evento, come click, change, mouseover ecc;

data: parametri passati alla funzione di ascolto, prelevabili tramite event.data. Opzionale;

function: funzione di ascolto, può passare l'oggetto event, qui l'event è l'oggetto event encapsulato da jQuery, che differisce dall'oggetto event nativo, e deve essere prestata attenzione durante l'uso

Codice sorgente di bind:

bind: function(types, data, fn) {
return this.on(types, null, data, fn);
}
$('#myol li').bind('click', getHtml);

Il carattere distintivo di bind è che associa gli ascoltatori agli elementi di destinazione, un ascoltatore per un elemento, e non c'è problema quando gli elementi della pagina non vengono aggiunti dinamicamente. Ma se si aggiunge dinamicamente un "elemento della lista 5" alla lista, non ci sarà risposta al clic, e sarà necessario bind di nuovo. Per evitare questo fastidio, possiamo utilizzare live.

jQuery offre anche un modo di binding degli eventi abbreviato come a.click(function(){});, a.change(function(){}); ecc., che hanno la stessa funzione di bind, ma sono solo abbreviazioni.

Due: live(type, [data], fn)

I parametri di live sono gli stessi di bind, ma cosa c'è di speciale? Vediamo prima un'occhiata al codice sorgente:

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

As can be seen, the live method does not bind the listener to itself (this), but binds it to this.context. What is this context? It is actually the limited range of the element, and it will be clear after looking at the following code:

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

In most cases, we will not use the selector in the third way, so we also think that this context is usually the document, that is, the live method binds the listener to the document. Did you remember the event delegation mechanism? If not, you can click here to recall it. live is exactly using the event delegation mechanism to complete the event listening and handling, and delegates the node handling to the document. In the listening function, we can use event.currentTarget to get the current captured node. The following example will reveal it:

$('#myol li').live('click',getHtml);

Three: live has such shortcomings, so we thought, since the old man is so burdened, why not bind the listener to the document instead, wouldn't it be better to bind it to the nearest parent element? Following the normal logic, delegate was born.

An additional parameter, selector, is added to specify the target element that triggers the event, and the listener will be bound to the element that calls this method. Let's take a look at the source code:

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

Again, on is called, and the selector is passed to on. It seems that this on is indeed a very important thing. Let's not worry about it for the time being. Let's look at the example first:

$('#myol').delegate('li','click',getHtml);

After seeing so much, are you eager to see the true face of this on? Here it comes:

on(type,[selector],[data],fn)

I parametri sono simili a delegate ma ci sono piccole differenze, prima di tutto il tipo e il selector sono scambiati, poi il selector è opzionale. La ragione dello scambio di posizione non può essere verificata, dovrebbe essere per rendere la visualizzazione più confortevole.

Non passiamo selector e vediamo un esempio:

$('#myol li').on('click',getHtml);

Si può vedere che event.currentTarget è li stesso, con lo stesso effetto di bind. Riguardo a passare selector, ha lo stesso significato di delegate, eccetto l'ordine dei parametri, che è completamente lo stesso.

Finalmente abbiamo visto l'effettivo ruolo di 'on', allora, con così tanti modi di binding degli eventi, come possiamo scegliere?

In realtà, questa domanda non è necessariamente complicata, perché già sapete la differenza tra loro, giusto? Scegliete a seconda della situazione reale. Tuttavia, c'è una raccomandazione ufficiale: usate 'on' il più possibile, perché altri metodi sono chiamate interne di 'on', l'uso diretto di 'on' può migliorare l'efficienza e potete sostituire altre tre scrittura con 'on'. Riguardo a come sostituirle, penso che non sia necessario spiegare così direttamente. Dopo aver capito veramente la differenza tra loro, naturalmente non sarà un problema.

Di seguito sono elencate le quattro modalità di binding degli eventi di jQuery presentate dall'autore, speriamo che possano essere utili a tutti. Se avete qualsiasi domanda, lasciate un commento e l'autore risponderà tempestivamente. In questo senso, ringraziamo anche tutti i sostenitori del sito web tutorial di urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito autonomamente dagli utenti di Internet e caricato autonomamente, il sito web non possiede il diritto di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare un'e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.