Javascript hooks bij een wijzigende DOM

Veel websites maken gebruik van Javascript om content te wijzigen. Indien er nieuwe content in de DOM geplaatst wordt zullen ook eventuele Javascript hooks opnieuw gezet moeten worden. Om te voorkomen dat je dit bij elke wijziging van de DOM zelf moet gaan doen, kun je ook het hele document observeren. Patrick legt uit.

Javascript hooks

Meestal is het zo dat de pagina na het inladen van de DOM de verschillende Javascript hooks initialiseert met een stukje Javascript wat lijkt op het Javascript fragment hieronder.

Voorbeeld basis Javascript met gebruik van Prototype:


document.observe("dom:loaded", function() {
    $$(".js-observe-me").each(function(element){
        element.observe("click", function(clickEvent) {
            // Doe iets met de click.
        });
    });
});

	

Voorbeeld basis Javascript met gebruik van jQuery:


$(function() {
    $(".js-observe-me").click(function() {
        // Doe iets met de click.
    });
});

	

Vermijd dubbele Javascript hooks

Dit stukje Javascript draait alleen als de DOM net is ingeladen en zal dus geen hooks meer zetten op content die met Javascript later in de DOM wordt toegevoegd. Indien daar ook hooks op geplaatst moeten worden, zal er na elke DOM manipulatie een apart Javascript gedraaid moeten worden om die hooks weer te installeren. Tevens zul je dan op moeten letten om geen dubbele hooks te krijgen op reeds bestaande elementen.

Om dubbele hooks te vermijden en dit proces te automatiseren kun je een klein stukje performance van de pagina inleveren om met één stuk Javascript alle hooks alvast op het document object plaatsen. Door het clickEvent te observeren en te zoeken naar de betreffende classname of id kan het betreffende script ook uitgevoerd worden.

Voorbeeld observeren van document met gebruik van Prototype:


document.observe("dom:loaded", function() {
    document.observe("click", function(clickEvent) {
        var element = clickEvent.findElement(".js-observe-me");
        if (element != document) {
            // Doe iets met de click.
        }
    });
});


	

Voorbeeld observeren van document met gebruik van jQuery:


$('body').click(function(clickEvent) {
    if ($(clickEvent.target).parents('.js-observe-me').length ) {
        // Doe iets met de click.
    }
});

	

Javascript hooks plaatsen

Belangrijk bij het gebruiken van deze aanpak is de afweging dat in het geval van een grote DOM dat het script bij elke klik meer werk moet verrichten om het target te vinden. Met deze aanpak ruilen we dus een beetje performance van de website in om op een universele manier Javascript hooks te plaatsen en zo fouten te voorkomen in de website.

Heeft u nog vragen over dit artikel? Neem dan contact met ons op.

De essentie van content marketing Foutje bedankt: een goede 404 pagina helpt.