Sfat rapid Diferența dintre Live () și Delegate ()

În jQuery 1.3, echipa a introdus metoda live (), care ne permite să angajăm pe manipulatorii de evenimente elemente de pe pagină, precum și pe orice care ar putea fi create în viitor dinamic. Deși nu este perfect, sa dovedit cu siguranță că este de ajutor. Cel mai notabil, live () bubbles tot drumul în sus, și atașează handler la document. De asemenea, încetează să funcționeze bine atunci când apelurile de legare a metodei, din păcate. Delegatul () a fost introdus în versiunea 1.4, care face aproape același lucru, dar mai eficient.

Vom examina diferențele specifice dintre cele două metode din sfatul rapid de astăzi. Datorită extensiei FireQuery Firebug, vom avea instrumentele pentru a înțelege mai ușor cum funcționează fiecare metodă.

Opțiuni de vizualizare alternativă

  • Ecranul (MP4)
 
  • Faceți clic pe Me
 // Bind atașează un handler de evenimente numai la elementele // care se potrivesc cu un anumit selector. Aceasta, de așteptat, // exclude orice elemente generate dinamic. $ ("# items li") faceți clic pe (funcția () $ (this) .parent () append ("
  • Elementul nou
  • ");); // Live (), introdus în 1.3, permite legarea // de la manipulatorii de evenimente la toate elementele care se potrivesc cu // selector, inclusiv cele create în viitor. // Face acest lucru prin atașarea handler la document // Din păcate, aceasta nu funcționează bine cu lanțuri // Nu vă așteptați să lanseze în direct () după apeluri ca // copii () next () ... etc $ ("li"). live ("clic", funcția () $ (this) .parent () append ("
  • Elementul nou
  • ");)); // Delegat, noul la versiunea 1.4, ar fi trebuit să fie o înlocuire completă // pentru Live (), însă, evident, // ar fi spart o mulțime de cod! a scurgerilor // găsite în live (), care atașează manipulatorul evenimentului // direct contextului, mai degrabă decât documentul. // De asemenea, nu suferă de problemele de înlănțuire // care trăiesc. mai multe avantaje de performanta // folosirea acestei metode peste live () $ ('# items') delegate ('li', 'click', function () $ (this) .parent ()
  • Elementul nou
  • „); ); // Prin trecerea unui element DOM ca context al selectorului nostru, putem face // Live () să se comporte (aproape) în același mod în care delegatul () // face. Acesta atașează manipulatorul contextului, nu // documentul - contextul implicit. // Codul de mai jos este echivalent cu versiunea delegat () // afișată mai sus. $ ("#") [0]) live ("faceți clic pe", funcția () $ (this) .parent ()
  • Elementul nou
  • "););

    Concluzie

    Acest lucru poate fi cu siguranță un subiect confuz. Nu ezitați să puneți întrebări sau să discutați în cadrul comentariilor. Mulțumesc mult lui Elijah Manor pentru clarificarea câtorva lucruri pentru mine pe această temă!

    Cod