Tag Archives: event delagation

Javascript functionaliteit delegeren

Delegeren is niet altijd even makkelijk, je moet er maar op vertrouwen dat het allemaal goed gaat en soms duurt het geven van de uitleg al langer dan “het zelf even doen”. Toch is delegeren soms noodzakelijk en kan het de prestaties bevorderen. Weinig nieuws tot nu toe, maar dat je dit ook in Javascript kan (en moet) doen was nog even nieuw voor mij. Gelukkig is daar met regelmaat de Sitepoint nieuwsbrief om mij op de hoogte te houden en deze keer stond daar een interessante blogpost van Andrew Tetlaw in.

Mede door de opkomst van Javascript frameworks als Prototype, JQuery and YUI heeft Javascript een tweede leven gekregen en wordt het steeds meer gebruikt op websites. Helaas wordt het toevoegen van Javascriptfunctionaliteit soms zó eenvoudig, dat er nauwelijks nagedacht hoeft te worden. Hierdoor laat de performance van websites soms te wensen over en wordt er veel meer geheugen gebruikt dan noodzakelijk.

Een oorzaak van deze matige performance, kan een overdaad aan Event-listeners zijn. Als alle cellen of rijen in een tabel naar een bepaald event moet luisteren, is je eerste ingeving waarschijnlijk om aan al deze elementen een eventlistener te hangen. Zeker met grote tabellen zorgt dit voor veel overload, dus dat moet beter kunnen. Zoals duidelijk uitgelegd wordt op PPK’s quirksmode, ‘bubbled’ een event omhoog door alle parent-nodes tot deze uitkomt bij de document node. Een alternatief voor het toekennen van eventlisteners aan de specifieke elementen, is het toekennen van een eventlistener aan een parent-element omdat het event uiteindelijk ook daar terecht komt. In de functie die het event ‘opvangt’ moet dan alleen het oorspronkelijke element achterhaald worden maar dat is eenvoudig op te lossen.

Ik zal hier geen code-voorbeelden plaatsen, die zijn al op verschillende sites te vinden. In het Sitepoint artikel staat een eenvoudig voorbeeld. Uitleg met voorbeelden (zonder library) staat op de Usable Type blog. Uiteraard zijn er ook voorbeelden voor de grote frameworks als jQuery, Prototype, en Yahoo! UI.

Ik weet in ieder geval één project waarop ik dit ga toepassen, ik ben benieuwd naar het verschil in performance!