Event methodes en properties

Een event is een object met eigen methodes en properties.

Event methodes

De twee belangrijkste methodes zijn:

• e.stopPropagation(): stopt event bubbling.

• e.preventDefault(): de default actie wordt niet getriggerd.

★ Pas het click-event op de a-tag uit vorige paragraaf als volgt aan:

$('a').click(function(e) { 
    e.stopPropagation();
    alert('U klikte op een a-tag');
});

Het event e wordt als parameter aan de functie toegevoegd. De methode e.stopPropagation() zorgt ervoor dat event bubbling wordt uitgeschakeld.

★ Open de pagina in een browser en klik opnieuw op de a-tag. De events op de li-tag en op de ul-tag worden niet meer uitgevoerd. ★ Open events/eventMethodes.html.

$('a').click(function(e) {
    e.preventDefault();
    alert('Link werkt niet meer');
});

De pagina bevat twee externe links. De methode e.preventDefault() zorgt ervoor dat de default actie (het openen van de link) niet wordt uitgevoerd.

De positie van e.preventDefault() binnen de functie is belangrijk. Stel dat de functie een fout bevat. Alle codes voor de fout worden uitgevoerd, maar alle codes na de fout niet.

★ Genereer een fout in de code. Maak van alert() bijvoorbeeld alerttt() en test de link. e.preventDefault() staat voor de foutieve code, dus de URL wordt niet geopend. ★ Plaats e.preventDefault(); achter alerttt() en test de links opnieuw. e.preventDefault() staat achter de foutieve code. De URL bij de link werkt nu wel.

Event properties

Enkele event properties:

• e.currentTarget: het elementtype waarop het event werd uitgevoerd.

• e.pageX: de horizontale positie van de cursor op de pagina.

• e.pageY: de verticale positie van de cursor op de pagina.

• e.timeStamp: het tijdstip waarop het event werd uitgevoerd. Een timestamp is het aantal ms verstreken sinds het laden van de pagina (Chrome, Firefox) of sinds 1 januari 1970 (Internet Explorer).

• e.type: het eventtype.

★ Open events/eventProperties.html in een browser en klik op de verschillende tags.

$(function() {
    $('h1, h2, p, li').click(function(e) { 
        var props = '';
        props += 'e.currentTarget: ' + e.currentTarget + '<br>';
        props += 'e.pageX: ' + e.pageX + '<br>';
        props += 'e.pageY: ' + e.pageY + '<br>';
        props += 'e.timeStamp: ' + e.timeStamp + '<br>'; 
        props += 'e.type: ' + e.type + '<br>';
        $('#props').html(props);
    });
});