Snabbtips Skillnaden mellan Live () och Delegate ()

I jQuery 1.3 introducerade teamet live () -metoden, vilket gör att vi kan binda händelsehanterare till element på sidan, liksom alla som kan skapas i framtiden dynamiskt. Även om det inte var perfekt, visade det sig definitivt vara till hjälp. Mest speciellt bor () bubblor hela vägen upp och fäster handlaren till dokumentet. Det upphör också att fungera bra när kedjemetoden anropar, tyvärr. Delegat () introducerades i version 1.4, vilket nästan gör detsamma, men mer effektivt.

Vi undersöker de specifika skillnaderna mellan de två metoderna i dagens snabba snabbspets. Tack vare FireQuery Firebug-förlängningen har vi verktygen för att lättare förstå hur varje metod fungerar.

Alternativa visningsalternativ

Screenr (MP4)

   Klicka här

 // Bind bifogar en händelsehanterare endast till elementen // som matchar en viss väljare. Detta, förväntat, // utesluter alla dynamiskt genererade element. $ ("# items li"). klicka (funktion () $ (this) .parent (). append ("Nytt element
");); // Live (), introducerad i 1.3, möjliggör bindning // av händelsehanterare till alla element som matchar en // -väljare, inklusive de som skapats i framtiden. // Det gör det genom att fästa handlare till dokumentet. // Tyvärr fungerar det inte bra med chaining. // Förvänta dig inte att kedja live () efter samtal som // children (). next () ... etc. $ ("li"). live ("klicka", funktion () $ (detta) .parent (). append ("Nytt element
"); //) Delegat, nytt till version 1.4, borde kanske ha varit en komplett // ersättning för Live (). Men det uppenbarligen // skulle ha brutit mycket kod! Ändå // delegerade rättsmedel många av short-comings // som finns i live (). Det bifogar händelsehanteraren // direkt till sammanhanget, snarare än dokumentet. // Det lider inte heller av kedjeproblemen // som lever gör. Det finns många prestationsfördelar // att använda denna metod över live (). $ ('# items'). delegat ('li', 'klick', funktion () $ (detta) .parent ()Nytt element
'); ); // Genom att skicka ett DOM-element som sammanhang för vår väljare kan vi göra // Live () uppför (nästan) på samma sätt som delegera () // gör. Det fäster handlaren till sammanhanget, inte // dokumentet - vilket är standardkontexten. // Koden nedan motsvarar delegaten () version // som visas ovan. $ ("li", $ ("# items") [0]) live ("klicka", funktion () $ (detta) .parent ()Nytt element
"););

Slutsats

Detta kan definitivt vara ett förvirrande ämne. Tveka inte att ställa frågor, eller diskutera i kommentarerna. Tack så mycket till Elijah Manor för att klargöra några saker för mig om detta ämne!

Koda