Les 7 - Invoer van gebruiker - Meer dan knoppen

Klikken maar niet op een knop

Eerder heb je al knoppen en invoer gemaakt. Elke keer als je op een knop drukt wordt er een event getriggerd dat vervolgens een functie oproept. Zo kan je dus JavaScript inschakelen om iets te doen met een druk op de knop. Wat ook kan, is eenzelfde soort event koppelen aan bijvoorbeeld plaatjes, stukjes tekst, je kan het zo gek niet bedenken!

Als je een knop maakt dan moet er natuurlijk ook op geklikt kunnen worden om een verandering te bewerkstelligen. Maar je hebt niet eens een knop nodig om iets te doen. We kunnen ook event handlers toevoegen aan bijvoorbeeld een paragraaf!

Kijk maar eens naar het volgende voorbeeld:

See the Pen Event-op-paragraaf by Jurjenh (@jurjenh) on CodePen.

Nog meer events

Buiten click heb je meerdere events die je aan een element kan plakken. Bijvoorbeeld mouseover en mouseout voor als je boven een element met de muis hangt dat er dan veranderingen plaats kunnen vinden. Alle events: https://www.w3schools.com/jsref/dom_obj_event.asp

Paar voorbeelden: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove

Mousemove

See the Pen Event-mousemove by Jurjenh (@jurjenh) on CodePen.

Mouseover

See the Pen Event-mouseover by Jurjenh (@jurjenh) on CodePen.