De methode on()

De methode on() is het manusje-van-alles. Alle methodes die we tot hiertoe besproken hebben, kunnen we eveneens via on() definiëren.

Syntax: $(selector).on('event', function(){...});

Enkele voorbeelden:

• $(selector).click(function(){...})is identiek aan

  $(selector).on('click', function(){...})

• $(selector).mouseenter(function(){...})is identiek aan

  $(selector).on('mouseenter', function(){...})

• $(selector).blur(function(){...})is identiek aan

  $(selector).on('blur', function(){...})

Maar de methode on() gaat nog veel verder. Zo kunnen we meerdere events koppelen aan dezelfde functie. We kunnen meerdere events koppelen aan verschillende functies en we kunnen events koppelen aan dynamisch gegenereerde of geïmporteerde HTML-code.

Eén selector en meerdere events met dezelfde functie

Syntax: $(selector).on('event1 event2 ...', function(){...});

★ Open events/on_1.html en bekijk het resultaat in een browser.

$(function() {
    $('main li').on('click mouseenter', function(e) { 
        var ev = e.type;
        var txt = $(this).text();
        $('#resultaat').html('event: '+ ev + ' <br>tekst: ' + txt);
    });
});

Zowel het click-event als het mouseenter-event voert dezelfde functie uit.

Eén selector en meerdere events met verschillende functies

Syntax: $(selector).on({event1:function(){...}, event2:function(){...}});

★ Open events/on_2.html en bekijk het resultaat in een browser.

$(function() {
    $('main li').on({
        click: function() {
            $('main li').removeClass('orange');
            $(this).addClass('orange');
        },
        mouseenter: function() {
            $(this).addClass('green');
        },
        mouseleave: function() {
            $(this).removeClass('green');
        }
    });
});

De li-tag triggert drie events. Het click-event kleurt de achtergrond van de li-tag oranje. Het mouseenter-event kleurt de achtergrond groen. Het mouseleave-event brengt de achtergrondkleur terug naar zijn vorige toestand.

Merk op dat dit niet werkt voor een mouseenter van een li die oranje is door een clickevent. Het event wordt weliswaar ook dan getriggerd, maar wanneer je meerdere classes toekent aan een element en daarin krijgt dezelfde property verschillende waarden, dan wordt de laatst toegekende waarde gebruikt, en dat is afhankelijk van de volgorde waarin de classes in de CSS-code gedefinieerd zijn, en niet van de volgorde waarin de classes worden toegekend!

Live event

Alle methodes, met uitzondering van on() werken uitsluitend op een selector die bij het openen van de pagina aanwezig is. In de volgende hoofdstukken gaan we op verschillende manieren extra HTML-code in het DOM toevoegen. Een event aan dynamisch gegenereerde code koppelen, kan enkel via on().

★ Open events/on_3.html en bekijk het resultaat in een browser.

$(function() {
    $('main li').click(function(){
        var txt = '<li><b>copy</b> ' + $(this).html() + '</li>';
        $('main ul').append(txt);
    });
});

De variabele txt maakt een nieuwe li-tag met daarin het woord copy, gevolgd door de tekst van het geklikte item. Op de volgende lijn wordt de waarde van txt met append() achteraan de ul-tag toegevoegd.

★ Klik enkele malen op één van de vier listitems. ★ Klik nu één van de nieuw gegenereerde items. U zal merken dat het click-event niet wordt uitgevoerd.

Om de gegenereerde code ook aan het click-event te koppelen, zijn we genoodzaakt om het event via de methode on() te koppelen.

Syntax: $(ancestor).on('event', 'selector', function(){...});

Waar de selector normaal voor de methode staat, verhuist deze nu binnen de methode. Voor de selector komt een ancestor tag vanwaar het event actief wordt. De ancestor tags voor onze li-tag zijn ul, article, div#outline en body.

Dus: $('li').click(function(){}); wordt: $('ul').on('click', 'li', function(){}); of: $('body').on('click', 'li', function(){});

★ Pas de code als volgt aan:

$(function() {
    $('main ul').on('click', 'li', function(){
        var txt = '<li><b>copy</b> ' + $(this).html() + '</li>';
        $('main ul').append(txt);
    });
});

De dynamisch gegenereerde li-tags zijn nu ook aanklikbaar en zullen opnieuw een copy achteraan de lijst toevoegen.

Wat u uiteindelijk voor on() plaatst, is afhankelijk van de toepassing. In dit voorbeeld kan u $('main ul') eventueel vervangen door $('body ul'). Dit geeft immers hetzelfde resultaat. De algemene regel is: plaats voor on() het element waarbinnen het event invloed mag hebben.