Cuprins
De la versiunea 1.7 a jQuery avem metoda on (), care ne oferă toate funcționalitățile necesare pentru a gestiona evenimentele. Datorită acestei metode nu mai avem nevoie de vechiul bind (), live () sau delegate (), dar nici nu avem nevoie de blur (), focus (), click (), hover () și altele.
La fel cum există on (), avem opusul său, off (), care elimină evenimentele atribuite cu on ().
Vom vedea o serie de exemple pentru a înțelege mai bine metoda on ().
Să presupunem că vrem să executăm o funcție când se face clic pe un buton:
(function () {$ ('button'). click (function () {// cod de executat});}) ();Este ca și cum am face-o în mod tradițional cu click (). Dar dacă ne uităm la codul jQuery vom vedea că ceea ce se întâmplă de fapt este că se apelează metoda on (), deci cel mai rapid lucru este de făcut:
(function () {$ ('button'). on ('click', function () {// cod de executat});}) ();Acesta este cel mai direct traseu. Și același lucru pentru alte metode, cum ar fi change (), hover (), mouseenter (), etc.
Să ne uităm la jQuery. Dacă descărcăm versiunea 1.7 sau o versiune ulterioară și analizăm codul acesteia, vom vedea următoarele:
jQuery.each (("blur focus focusin focusout load redimensionare scroll descărcare click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit submit keydown keypress keyup error contextmenu"). split (""), funcție f (i, nume) {// Gestionați legarea evenimentelor jQuery.fn [nume] = funcție (date, fn) {if (fn == nul) {fn = date; date = nul;} returnează argumente lungime -> 0? This.on (nume, nul, date, fn): this.trigger (nume);};De aici ne interesează doar să vedem că metodele „blur, focus, focusin, focusout, încărcare, redimensionare, derulare, descărcare, clic, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error and contextmenu "la sfârșitul tuturor se termină în" this.on (nume, nul, date, fn) ".
bind (), live () și delegate ()
În trecut se făcea și:
(function () {$ ('button'). bind ('click', function () {// cod de executat când se face clic pe buton});}) ();Sau dacă am dori ca evenimentul să funcționeze chiar și după adăugarea de noi elemente „buton” în document, atunci am folosi metoda live ():
(function () {$ ('button'). live ('click', function () {// cod de executat când se face clic pe buton});}) ();Ulterior, jQuery a introdus „delegate ()”, ceea ce ne-a permis să atribuim un eveniment unui context. De exemplu, dacă butonul este (sau va fi, dacă este adăugat mai târziu) în interiorul unui div cu clasa „container”:
(function () {$ ('div.container'). delegate ('button', 'click', function () {// cod de executat când se face clic pe buton});}) ();Dar, ca și în cazul celor anterioare, atât bind (), live () sau delegate () tot ceea ce fac este să apeleze metoda on ().V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
