Gebruikersevents

Gebruikersevents zijn steeds gekoppeld aan een selector. De actie staat binnen een zogenoemde callback functie.

Syntax: $(selector).event(function(){...acties...}).

Verder is de naam van de methode identiek aan de naam van het event. Bijvoorbeeld: de methode click() staat voor het click-event.

Herinner u de term unobtrusive JavaScript. Het JavaScript wordt volledig gescheiden van de HTML-structuur, zodat we de code makkelijk kunnen onderhouden en hergebruiken. Omdat een event vanuit het script aan een selector wordt gekoppeld, noemt men dit event binding. De functie binnen het event noemen we de event handler.

Gebruikersevents kunnen we onderverdelen in verschillende categorieën, namelijk muisevents, formulierevents en toetsenbordevents.

Muisevents

De acties met de muis vormen de grootste groep events. Enkele van deze events hebben we reeds in voorgaande hoofdstukken gebruikt. De belangrijkste muisevents zijn:

• click(): klik op de selector.

• dblclick(): dubbelklik op de selector.

• *mouseover(): plaats de muis boven de selector.

• *mouseenter(): plaats de muis boven de selector.

• *mouseout(): verwijder de muis van de selector.

• *mouseleave(): verwijder de muis van de selector.

• mousemove(): verplaats de muis over de selector.

• mousedown(): plaats de muis boven de selector en klik op de muistoets.

• mouseup(): plaats de muis boven de selector, klik op de muistoets en laat ze weer los.

* Er is een groot verschil tussen mouseover()/mouseenter() en mouseout()/mouseleave().

Het event mouseover() wordt getriggerd zodra u met de muis boven de selector komt, maar wordt ook getriggerd indien u over descendant elementen komt. Het event mouseenter() houdt daarentegen geen rekening met de descendant elementen. Volgend voorbeeld illustreert het verschil tussen beide events.

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

<article id="overEnter">
    <section>
        <h2>Mouseover</h2>
        <p id="over">&nbsp;</p>
        <div id="div1"><div id="div2"><div id="div3">
            <p>...</p><p>...</p>
        </div></div></div>
    </section>
    <section>
        <h2>Mouseenter</h2>
        <p id="enter">&nbsp;</p>
        <div id="div4"><div id="div5"><div id="div6">
            <p>...</p><p>...</p>
        </div></div></div>
    </section>
</article>
.....
<script>
    $(function() {
        var i = 0
        $('#div1').mouseover(function() {   // mouseover
            ++i;
            $('#over').text('mouseover: ' + i);
        });
        var j = 0
        $('#div4').mouseenter(function() {  // mouseenter
            ++j;
            $('#enter').text('mouseover: ' + j);
        });
    });
</script>

De pagina bevat verschillende div-tags. #div1 heeft als childelement #div2 en verder ook #div3 en nog enkele p-tags als dieper gelegen descendant elementen. #div4 heeft als childelement #div5 en #div6 en enkele p-tags als descendants op een lager niveau. Op #div1 staat het mouseover-event en op #div4 het mouseenter-event.

★ Beweeg de muis verticaal over #div1. ★ Beweeg de muis verticaal over #div4.

Telkens u het mouseover-event (#div1) activeert, wordt de teller i met één verhoogd en verschijnt de waarde van i in paragraaf #over. Zodra u de muis één niveau dieper (of hoger) in de boomstructuur verplaatst, wordt de teller verhoogd.

U zal merken dat de teller j enkel verhoogt als u over #div4 komt. De onderliggende descendant elementen zullen de teller niet verhogen.

Het mouseover-event gaat gepaard met event bubbling. Hierover dadelijk meer.

Muisevents

Formulierevents

Volgende events hebben betrekking op formulierelementen zoals tekstvelden, radiobuttons, checkboxen en knoppen.

• blur(): de selector verliest de focus.

• change(): de waarde van de selector wijzigt.

• focus(): de selector krijgt de focus.

• select(): selecteer de inhoud van de selector.

• submit(): verzend het formulier.

Toetsenbordevents

Toetsenbordevents worden vaak in combinatie met formulieren gebruikt. Denk maar aan een autosuggest tekstveld. De gebruiker typt enkele letters in een zoekveld en automatisch verschijnen er enkele suggesties. Het Google zoekveld maakt bijvoorbeeld gebruik van autosuggest.

Toetsenbordevents

De toetsenbordevents in jQuery zijn:

• keydown(): druk een toets in.

• keypress(): druk een toets in (werkt niet met speciale toetsen zoals esc, del, ...).

• keyup(): laat de toets los.

Indien u een toets lange tijd ingedrukt houdt, wordt keydown() maar eenmaal geactiveerd en keypress() meermaals geactiveerd.

Gebruikersevents zonder callback functie

Alle voorgaande methodes met een callback functie worden gebruikt als event handler. Dezelfde methodes kunnen ook zonder functie gebruikt worden en zullen dan het event triggeren. Enkele voorbeelden:

• $('#button1').click(): activeer het click-event op #button1.

• $('#naam').focus(): plaatst de cursor in het (tekst)veld #naam.

• $('#form1').submit(): verzend het formulier met id #form1.

Zoals het laatste voorbeeld illustreert, kan u volledig programmatorisch een formulier verzenden, zonder tussenkomst van de gebruiker. Deze methode wordt zeer vaak gebruikt bij contactformulieren. Indien de gebruiker een formulier verzendt, wordt eerst gecontroleerd of alle velden correct zijn ingevuld. (naam, email, enz...). Pas als alle gegevens correct zijn ingevuld, zal het formulier verzonden worden. Bij foutieve gegevens krijgt de gebruiker enkel een foutboodschap.