Share
Este important să rețineți că puteți declara cât mai multe obiceiuri gata() evenimente așa cum doriți. Nu vă limitați la atașarea unui singur .gata() eveniment la document. gata() evenimentele sunt executate în ordinea în care sunt incluse.
Note: Dacă trecem funcția jQuery, o funcție - de ex. jQuery (funciton () // cod aici) - este o scurtătură pentru jQuery (documentul) .ready ().
Utilizarea lega() - de exemplu. jQuery ( 'a'). bind (clic, funcția () ) - puteți adăuga oricare dintre următorii agenți de standardizare la elementele DOM corespunzătoare.
Accentsconagua
estompaconcentrasarcinăredimensionasuldescărcabeforeunloadclicdblclickmousedownMouseUpmousemovemouse-ul pestemouseoutSchimbareSelectația depuneTasta în joskeypresskeyuperoareEvident, pe baza standardelor DOM, numai anumiți manipulatori coincid cu anumite elemente.
În plus față de această listă de agenți de lucru standard, puteți, de asemenea, să profitați de ele lega() pentru a atașa handler-ele personalizate jQuery - de ex. mouseenter și mouseleave - precum și orice manipulatoare personalizate pe care le puteți crea.
Pentru a elimina utilizatorii standard sau agenții personalizați, pur și simplu treceți desface() metoda de manipulare numele sau numele personalizat handler care trebuie să fie eliminate - de ex. jQuery ( 'a'). dezlega ( 'click'). Dacă nu se transmit parametri desface(), acesta va elimina toți manipulanții atașați la un element.
Aceste concepte discutate sunt exprimate în exemplul de cod de mai jos.
Note: jQuery oferă mai multe comenzi rapide la lega() metoda de utilizare cu toate evenimentele standard DOM, care exclude evenimente jQuery personalizate cum ar fi mouseenter și mouseleave. Utilizarea acestor comenzi rapide presupune înlocuirea numelui evenimentului cu numele metodei - de ex. .clic(), mouseout (), se concentreze ().
Aveți posibilitatea să atașați utilizatori nelimitați la un singur element DOM folosind jQuery.
jQuery oferă unu() metoda de manipulare a evenimentului pentru a lega convenabil un eveniment elementelor DOM care vor fi executate o dată și apoi eliminate. unu() metoda este doar un înveliș pentru lega() și desface().
Sintaxa de scurtătură - de ex. .clic(), mouseout (), și se concentreze () - pentru legarea unui manipulator de evenimente la un element DOM poate fi, de asemenea, folosit pentru a invoca programabil manageri. Pentru a face acest lucru, pur și simplu utilizați metoda evenimentului de comenzi rapide fără a trece o funcție. În teorie, aceasta înseamnă că putem lega un manipulant unui element DOM și apoi îl invocăm imediat pe acel manipulant. Mai jos, demonstrez acest lucru prin clic() eveniment.
Spune bună Spune bună
Note: Este, de asemenea, posibilă utilizarea evenimentului declanșare () metodă pentru a invoca anumiți agenți de manipulare - de ex. jQuery ('a') faceți clic pe (funcția () alert ('hi')).. Aceasta va funcționa, de asemenea, cu evenimente cu nume și evenimente personalizate.
jQuery normalizează obiectul evenimentului în conformitate cu standardele W3C. Aceasta înseamnă că atunci când obiectul evenimentului este transmis unui handler de funcții, nu trebuie să vă faceți griji cu privire la implementările specifice ale browserului pentru obiectul evenimentului (de exemplu, Internet Explorer window.event). Puteți utiliza următoarele atribute și metode ale obiectului eveniment fără griji față de diferențele browserului deoarece jQuery normalizează obiectul evenimentului.
tip de evenimentevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()Pentru a accesa obiectul evenimentului jQuery normalizat, pur și simplu treceți funcția anonimă, trecută la o metodă a evenimentului jQuery, un parametru numit "eveniment" (sau orice doriți să-l numiți). Apoi, în interiorul funcției de apel invers anonim, utilizați parametrul pentru a accesa obiectul evenimentului. Mai jos este un exemplu codificat al acestui concept.
Deseori vom avea un obiect în DOM care trebuie să aibă mai multe funcții legate de un singur handler de evenimente. De exemplu, hai să luăm mânerul pentru redimensionare. Folosind jQuery, putem adăuga cât mai multe funcții la window.resize cum ne place. Dar ce se întâmplă când trebuie să eliminăm doar una dintre aceste funcții, dar nu toate acestea? Dacă vom folosi $ (Fereastră) .unbind ( 'resize'), toate funcțiile atașate la window.resize handler va fi eliminat. Prin plasarea numelor unui manipulator (de ex. resize.unique), putem atribui un cârlig unic unei funcții specifice pentru eliminare.
În codul de mai sus, adăugăm două funcții la dispozitivul de redimensionare. Al doilea eveniment (pentru ordinea documentelor) redimensionat adăugat folosește namespacing eveniment și apoi elimină imediat acest eveniment folosind desface(). Am făcut acest lucru pentru a face ca prima funcție atașată să nu fie eliminată. Evenimentele privind evenimentele cu numele ne dau posibilitatea de a eticheta și de a elimina funcțiile unice atribuite aceluiași manipulator pe un singur element DOM.
În plus față de dezlegarea unei funcții specifice asociate unui singur element DOM și a unui manipulator, putem folosi și namespacingul evenimentului pentru a invoca exclusiv (folosind declanșare ()) un handler specific și o funcție atașată la un element DOM. În codul de mai jos, se adaugă două evenimente pentru clicuri , și apoi folosind namespacing, doar unul este invocat.
clic
Note: Nu există limită pentru adâncimea sau numărul de spații de nume folosite - de ex. resize.layout.headerFooterContent.
Păstrarea numelor este o modalitate excelentă de a proteja, invoca, înlătura orice manipulatori exclusivi pe care pluginul le poate cere.
Funcțiile numelui funcționează cu evenimente personalizate, precum și evenimente standard - de ex. click.unique sau myclick.unique.
Delegarea evenimentului se bazează pe propagarea evenimentului (bâlbâială, de exemplu). Când faceți clic pe un în interiorul unui , care este în interiorul unui la la
Aceasta înseamnă că dacă atașăm un eveniment de clic la un care este încapsulat în interior event.target) pentru a identifica ce element din DOM a cauzat de fapt pornirea bubblării evenimentului. Din nou, acest lucru ne va da o referință la elementul care a început să provoace bubbling.
Procedând astfel, putem adăuga, în mod evident, un manipulator de evenimente la o mulțime de elemente DOM folosind doar un singur procesator / declarație de eveniment. Acest lucru este extrem de util; de exemplu, un tabel cu 500 de rânduri în cazul în care fiecare rând necesită un eveniment clic poate beneficia de delegarea evenimentului. Examinați codul de mai jos pentru clarificare.
Acum, dacă trebuia să faceți clic pe unul dintre gloanțele reale ale listei și nu pe link-ul însuși, ghiciți ce? Veți termina eliminarea event.target este , Nu . Deoarece acesta este cazul, mamă() metoda va apuca atunci când se face clic pe un prin trecerea lui mamă() metoda o expresie element.
$ (Event.target) .parent ( 'li') șterge (.);
Punctul important aici este că trebuie să gestionați cu atenție ce se face clic atunci când zona pe care se poate face clic conține elemente multiple încapsulate datorită faptului că nu știți exact unde poate fi făcut clic de utilizator. Din această cauză, trebuie să verificați dacă clicul a apărut din elementul pe care l-ați așteptat.
Folosind funcția la îndemână Trăi() , puteți lega agenții de manipulare la elementele DOM aflate în prezent într-o pagină Web și la cele care încă nu au fost adăugate. Trăi() metoda folosește delegarea evenimentelor pentru a se asigura că elementele DOM nou adăugate / create vor răspunde întotdeauna la manipulatorii de evenimente, indiferent de manipularea DOM sau de modificările dinamice ale DOM. Utilizarea Trăi() este, în esență, o comandă rapidă pentru a trebui să înființeze delegația evenimentelor. De exemplu, folosind Trăi() am putea crea un buton care creează un alt buton la nesfârșit.
După examinarea codului, ar trebui să fie evident că îl folosim Trăi() să aplicați delegarea evenimentelor la un element parent ( element în exemplul de cod) astfel încât orice element de buton adăugat la DOM să răspundă întotdeauna la instrumentul de procesare a clicurilor.
Pentru a elimina evenimentul live, pur și simplu folosim a muri() metoda ex. $ ( 'Butonul'). Die ().
Conceptul de a lua este departe Trăi() metoda ar putea fi folosită pentru atașarea evenimentelor la elementele DOM care sunt eliminate și adăugate utilizând AJAX. În acest fel, ați renunța la rebinderea evenimentelor la elemente noi introduse în DOM după încărcarea inițială a paginii.
Note: Trăi() sprijină următorii utilizatori: clic, dblclick, mousedown, MouseUp, mousemove, mouse-ul peste, mouseout, Tasta în jos, keypress, keyup.
Trăi() funcționează numai împotriva unui selector.
Trăi() implicit va opri propagarea prin utilizarea return false în cadrul funcției trimise către Trăi() metodă.
Este posibil să treceți evenimentul lega() metodă mai multe manipulatoare de evenimente. Acest lucru face posibilă atașarea aceleiași funcții, scrise o dată, la mai mulți manipulatori. În exemplul de cod de mai jos, atașăm o singură funcție de apel invers anonim la apăsarea pe buton, apăsarea de taste și redimensionarea agendei de preluare a evenimentului pe document.
Atunci când se face clic pe un link sau se trimite un formular, browserul va invoca funcționalitatea implicită asociată cu aceste evenimente. De exemplu, faceți clic pe a și browserul Web va încerca să încarce valoarea lui href atribut în fereastra browserului curent. Pentru a opri browserul să efectueze acest tip de funcționalitate, puteți utiliza funcția preventDefault () metoda obiectului eveniment normalizat jQuery.
jQuery
Evenimentele se propagă (de exemplu bubble) în DOM. Când un manipulator de evenimente este declanșat pentru un element dat, procesorul de eveniment invocat este invocat și pentru toate elementele strămoșilor. Acest comportament implicit facilitează soluții precum delegarea evenimentelor. Pentru a interzice această blocare implicită, puteți utiliza metoda evenimentului normalizat jQuery stopPropagation ().
Stop
În exemplul de cod de mai sus, dispozitivul de tratare a evenimentelor este atașat la Returnează falsul - de ex. Dacă ați fi comentat Cu jQuery, aveți abilitatea de a crea propriile evenimente personalizate folosind Acum, deoarece aceste evenimente sunt personalizate și nu sunt cunoscute de browser, singura modalitate de a invoca evenimentele personalizate este de a le declanșa programatic utilizând jQuery Implicit, clonarea structurilor DOM folosind Prin atașarea a Este adesea necesar să obțineți coordonatele X și Y ale indicatorului mouse-ului în raport cu un alt element decât portul de vizualizare sau întregul document. Acest lucru se face, de obicei, cu ToolTips, în cazul în care ToolTip este afișat în raport cu locația pe care mouse-ul este plutind. Aceasta se poate realiza cu usurinta prin scaderea offsetului elementului relativ din coordonatele X si Y ale mouse-ului.
Anularea comportării implicite și propagarea evenimentelor prin
return false return false - este echivalentul folosirii ambelor preventDefault () și stopPropagation (). faceți clic pe mine return false declarație în codul de mai sus, alerta() ar fi invocat deoarece browserul va executa în mod implicit valoarea href. De asemenea, pagina va naviga la jQuery.com din cauza bubblării evenimentului.
Creați evenimente personalizate și declanșați prin declanșator ()
lega() metodă. Acest lucru se face prin furnizarea lega() cu un nume unic pentru un eveniment personalizat.declanșare () metodă. Examinați codul de mai jos pentru un exemplu de eveniment personalizat care este invocat utilizând declanșare ().
Evenimente Cloning, precum și elemente DOM
clona () metoda nu clonează suplimentar evenimentele atașate la elementele DOM care sunt clonate. Pentru a clona elementele și evenimentele atașate elementelor trebuie să treci clona () metoda o valoare booleană a Adevărat. Adăugați un alt link
Obținerea coordonatelor X și Y ale mouse-ului în fereastra de vizualizare
mousemove eveniment pe întreaga pagină (document), puteți recupera coordonatele X și Y ale indicatorului mouse-ului pe măsură ce se mișcă înăuntru în portul de vizualizare deasupra pânzei. Acest lucru se face prin preluarea PaginaY și PaginaX proprietățile obiectului eveniment normalizat jQuery.
Obținerea coordonatelor X și Y ale mouse-ului în raport cu un alt element
