Share
È importante tenere presente che è possibile dichiarare il maggior numero di personalizzati pronto() eventi come vorresti. Non sei limitato ad allegare un singolo .pronto() evento al documento. Il pronto() gli eventi vengono eseguiti nell'ordine in cui sono inclusi.
Gli appunti: Passando alla funzione jQuery, una funzione - ad es. jQuery (funciton () // code here) - è una scorciatoia per jQuery (document) .ready ().
Usando il bind () metodo - ad es. jQuery ( 'a'). bind ( 'click', function () ) - è possibile aggiungere uno dei seguenti gestori standard agli elementi DOM appropriati.
Accentsconagua
sfocaturamessa a fuococaricareridimensionarescorrerescaricarebeforeunloadclicDblClickmousedownMouseUpMouseMovemouseovermouseoutmodificareselezionareSottoscrivikeydownpressione di un tastokeyuperroreOvviamente, in base agli standard DOM, solo alcuni gestori coincidono con elementi particolari.
Oltre a questo elenco di gestori standard, puoi anche fare leva bind () per allegare gestori personalizzati jQuery - ad es. MouseEnter e mouseLeave - così come tutti i gestori personalizzati che puoi creare.
Per rimuovere i gestori standard o i gestori personalizzati, semplicemente passiamo il svincolare () metodo il nome del gestore o il nome del gestore personalizzato che deve essere rimosso - ad es. jQuery ( 'a'). svincolare ( 'click'). Se nessun parametro è passato a svincolare (), rimuoverà tutti i gestori collegati a un elemento.
Questi concetti appena discussi sono espressi nell'esempio di codice seguente.
Gli appunti: jQuery offre diverse scorciatoie per bind () metodo da utilizzare con tutti gli eventi DOM standard, che esclude gli eventi jQuery personalizzati come MouseEnter e mouseLeave. L'utilizzo di queste scorciatoie implica semplicemente la sostituzione del nome dell'evento come nome del metodo - ad es. .clic(), mouseout (), messa a fuoco().
Puoi associare un numero illimitato di gestori a un singolo elemento DOM usando jQuery.
jQuery fornisce il uno() metodo di gestione degli eventi per associare convenientemente un evento agli elementi DOM che verranno eseguiti una volta e quindi rimossi. Il uno() il metodo è solo un wrapper per bind () e svincolare ().
La sintassi di scelta rapida - ad es. .clic(), mouseout (), e messa a fuoco() - per il binding di un gestore di eventi a un elemento DOM può essere utilizzato anche per invocare i gestori a livello di codice. Per fare ciò, usa semplicemente il metodo dell'evento di collegamento senza passargli una funzione. In teoria, ciò significa che possiamo associare un gestore a un elemento DOM e quindi invocare immediatamente quel gestore. Di seguito, lo dimostrerò tramite il clic() evento.
Dì ciao Dì ciao
Gli appunti: È anche possibile utilizzare l'evento trigger () metodo per invocare gestori specifici - ad es. jQuery ('a'). click (function () alert ('hi')). trigger ('click'). Funzionerà anche con gli eventi con nomi assegnati e personalizzati.
jQuery normalizza l'oggetto evento in base agli standard W3C. Ciò significa che quando l'oggetto evento viene passato a un gestore di funzioni non ti devi preoccupare delle implementazioni specifiche del browser dell'oggetto evento (ad esempio, di Internet Explorer window.event). È possibile utilizzare senza problemi i seguenti attributi e metodi dell'oggetto evento dalle differenze tra browser poiché jQuery normalizza l'oggetto evento.
Tipo di eventoevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()Event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()Event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()Per accedere all'oggetto evento jQuery normalizzato, basta passare la funzione anonima, passata a un metodo evento jQuery, un parametro denominato "evento" (o qualsiasi altra cosa si voglia chiamare). Quindi, all'interno della funzione di callback anonimo, utilizzare il parametro per accedere all'oggetto evento. Di seguito è riportato un esempio codificato di questo concetto.
Spesso avremo un oggetto nel DOM che deve avere diverse funzioni legate a un singolo gestore di eventi. Ad esempio, prendiamo il gestore di ridimensionamento. Usando jQuery, possiamo aggiungere tante funzioni al window.resize gestore come ci piace. Ma cosa succede quando è necessario rimuovere solo una di queste funzioni ma non tutte? Se usiamo $ (Window) .unbind ( 'ridimensionamento'), tutte le funzioni collegate al window.resize il gestore verrà rimosso. Per namespace un gestore (ad es. resize.unique), possiamo assegnare un hook univoco a una funzione specifica per la rimozione.
Nel codice precedente, aggiungiamo due funzioni al gestore di ridimensionamento. Il secondo evento di ridimensionamento (ordine documento) aggiunto utilizza il namespace degli eventi e quindi rimuove immediatamente questo evento utilizzando svincolare (). L'ho fatto per sottolineare che la prima funzione collegata non è stata rimossa. Gli eventi Namespacing ci danno la possibilità di etichettare e rimuovere funzioni univoche assegnate allo stesso gestore su un singolo elemento DOM.
Oltre a non associare una funzione specifica associata ad un singolo elemento DOM e gestore, possiamo anche usare il namespacing degli eventi per invocare esclusivamente (usando trigger ()) un gestore e una funzione specifici collegati a un elemento DOM. Nel codice seguente, vengono aggiunti due eventi clic , e quindi usando namespacing, viene invocato solo uno.
clic
Gli appunti: Non c'è limite alla profondità o al numero di spazi dei nomi usati - ad es. resize.layout.headerFooterContent.
Namespacing è un ottimo modo per proteggere, invocare, rimuovere eventuali gestori esclusivi che un plugin potrebbe richiedere.
Namespacing funziona con eventi personalizzati e eventi standard - ad es. click.unique o myclick.unique.
La delega degli eventi si basa sulla propagazione degli eventi (a.k.a. bubbling). Quando si fa clic su all'interno di a , che è all'interno di a al al
Questo significa che associamo un evento click a a che è incapsulato all'interno del event.target) per identificare quale elemento nel DOM ha effettivamente provocato l'inizio dell'evento bubbling. Di nuovo, questo ci darà un riferimento all'elemento che ha dato il via alle bolle.
Facendo ciò, possiamo apparentemente aggiungere un gestore di eventi a una grande quantità di elementi DOM usando solo un singolo gestore di eventi / dichiarazione. Questo è estremamente utile; ad esempio, una tabella con 500 righe in cui ogni riga richiede un evento click può sfruttare la delega degli eventi. Esaminare il seguente codice per chiarimenti.
Ora, se dovessi letteralmente cliccare su uno dei proiettili effettivi della lista e non sul link stesso, indovina cosa? Finirai per rimuovere il event.target è il , non il . Poiché questo è il caso, il genitore() il metodo prenderà il quando viene cliccato da un passando il genitore() metodo un espressione di elemento.
$ (Event.target) .parent ( 'li') rimuovere ().;
Il punto importante qui è che devi gestire con attenzione ciò che viene cliccato quando l'area cliccabile contiene più elementi incapsulati a causa del fatto che non sai mai esattamente dove l'utente può fare clic. Per questo motivo, è necessario verificare che il clic si sia verificato dall'elemento che ci si aspettava.
Usando il pratico vivere() metodo di evento, è possibile associare i gestori agli elementi DOM attualmente presenti in una pagina Web e quelli che devono ancora essere aggiunti. Il vivere() Il metodo usa la delega degli eventi per assicurarsi che gli elementi DOM appena aggiunti / creati rispondano sempre ai gestori di eventi indipendentemente dalle manipolazioni DOM o dalle modifiche dinamiche al DOM. utilizzando vivere() è essenzialmente una scorciatoia per dover manualmente impostare la delega degli eventi. Ad esempio, utilizzando vivere() potremmo creare un pulsante che crea un altro pulsante indefinitamente.
Dopo aver esaminato il codice, dovrebbe essere ovvio che stiamo usando vivere() per applicare la delega degli eventi a un elemento padre ( elemento nell'esempio di codice) in modo che ogni elemento del pulsante aggiunto al DOM risponda sempre al gestore dei clic.
Per rimuovere l'evento dal vivo, utilizziamo semplicemente il morire() Metodo-es. $ ( 'Bottone'). Die ().
Il concetto da portare via è il vivere() è possibile utilizzare il metodo per allegare eventi agli elementi DOM che vengono rimossi e aggiunti utilizzando AJAX. In questo modo, rinunciare a rebindare gli eventi ai nuovi elementi introdotti nel DOM dopo il caricamento iniziale della pagina.
Gli appunti: vivere() supporta i seguenti gestori: clic, DblClick, mousedown, MouseUp, MouseMove, mouseover, mouseout, keydown, pressione di un tasto, keyup.
vivere() funziona solo contro un selettore.
vivere() per impostazione predefinita interromperà la propagazione usando restituisce falso all'interno della funzione inviata al vivere() metodo.
È possibile passare l'evento bind () metodo diversi gestori di eventi. Ciò rende possibile allegare la stessa funzione, scritta una volta, a molti gestori. Nell'esempio di codice riportato di seguito, viene allegata una singola funzione di callback anonimo al clic, alla pressione di un tasto e al ridimensionamento dei gestori di eventi sul documento.
Quando viene fatto clic su un collegamento o viene inviato un modulo, il browser invocherà la sua funzionalità predefinita associata a questi eventi. Ad esempio, fare clic su un collegamento e il browser Web tenterà di caricare il valore di href attributo nella finestra corrente del browser. Per impedire al browser di eseguire questo tipo di funzionalità, è possibile utilizzare preventDefault () metodo dell'oggetto evento normalizzato jQuery.
jQuery
Gli eventi si propagano (a.k.a. bubble) sul DOM. Quando viene attivato un gestore di eventi per ogni dato elemento, anche il gestore di eventi invocato viene invocato per tutti gli elementi degli antenati. Questo comportamento predefinito facilita soluzioni come la delega degli eventi. Per vietare questo bubbling predefinito, è possibile utilizzare il metodo di evento normalizzato jQuery stopPropagation ().
Stop
Nell'esempio di codice sopra, il gestore eventi collegato al file Ritorno false - ad es. Se dovessi commentare il Con jQuery, hai la possibilità di creare i tuoi eventi personalizzati usando il Ora, poiché questi eventi sono personalizzati e non sono noti al browser, l'unico modo per richiamare eventi personalizzati è di attivarli a livello di codice utilizzando jQuery Di default, clonando le strutture DOM usando il Allegando a Spesso è necessario ottenere le coordinate X e Y del puntatore del mouse rispetto a un elemento diverso dalla finestra o dall'intero documento. Questo viene in genere fatto con ToolTips, in cui viene mostrata la descrizione del comando relativa alla posizione in cui il mouse è in bilico. Questo può essere facilmente ottenuto sottraendo l'offset dell'elemento relativo dalle coordinate del mouse X e Y della finestra.
Annullamento del comportamento predefinito e della propagazione degli eventi tramite
restituisce falso restituisce falso - è l'equivalente dell'uso di entrambi preventDefault () e stopPropagation (). cliccami restituisce falso dichiarazione nel codice sopra, mettere in guardia() verrebbe invocato perché per impostazione predefinita il browser eseguirà il valore di href. Inoltre, la pagina naviga su jQuery.com a causa di bolle di eventi.
Crea eventi personalizzati e attivali tramite trigger ()
bind () metodo. Questo viene fatto fornendo il bind () metodo con un nome univoco per un evento personalizzato.trigger () metodo. Esamina il codice seguente per un esempio di un evento personalizzato che viene invocato utilizzando trigger ().
Clonazione di eventi così come elementi DOM
clone() il metodo non clona ulteriormente gli eventi associati agli elementi DOM che vengono clonati. Per clonare gli elementi e gli eventi collegati agli elementi devi passare il clone() metodo un valore booleano di vero. Aggiungi un altro link
Ottenere le coordinate X e Y del mouse nel Viewport
MouseMove evento per l'intera pagina (documento), è possibile recuperare le coordinate X e Y del puntatore del mouse mentre si sposta all'interno della finestra sull'area di disegno. Questo viene fatto recuperando il pagey e pageX proprietà dell'oggetto evento normalizzato jQuery.
Ottenere le coordinate X e Y del mouse rispetto a un altro elemento
