Week 4 - Toets en addEventListener | JavaScript Cheatsheet

Herhaling week 1-3#

Wat hebben we tot nu toe geleerd?

Variabelen: let en const
Datatypes: string, number, boolean
Output: console.log, alert, innerHTML
Input: prompt
Functies: code hergebruiken
Events: onclick in HTML
DOM: getElementById en style
If/else: keuzes maken in je code
State: waardes onthouden

addEventListener (nieuwe manier voor events)#

Wat is addEventListener?
Tot nu toe gebruikten we onclick in HTML. Dat werkt prima, maar addEventListener is een modernere manier om events te koppelen. Je schrijft alles in JavaScript.

Verschil tussen onclick en addEventListener:

Oude manier (onclick):

// HTML:

                            <button onclick="klik()">Klik</button>


                            // JavaScript:

                            function klik() {

                              console.log("Geklikt!");

                            }

Nieuwe manier (addEventListener):

// HTML:

                            <button id="mijnKnop">Klik</button>


                            // JavaScript:

                            let knop = document.getElementById("mijnKnop");

                            knop.addEventListener("click",
                            klik);


                            function klik() {

                              console.log("Geklikt!");

                            }

Voordelen van addEventListener:

Je HTML blijft schoner (geen JavaScript in HTML)
Je kunt meerdere events aan 1 element koppelen
Professionelere manier van werken

addEventListener gebruiken#

Basis opbouw:

element.addEventListener("eventType",
                    functieNaam);

element → het HTML element (bijv. een knop)
"eventType" → wat voor event (bijv. "click", "mouseover")
functieNaam → welke functie moet worden uitgevoerd

Stappen om addEventListener te gebruiken:

Geef je HTML element een id
Selecteer het element met getElementById
Voeg de addEventListener toe
Maak de functie die moet gebeuren

Voorbeelden#

Voorbeeld 1: Knop verandert tekst

HTML:

<p id="tekst">Hallo</p>

                            <button id="veranderKnop">

                              Verander tekst

                            </button>

JavaScript:

let knop = document.getElementById("veranderKnop");


                            knop.addEventListener("click",
                            veranderTekst);


                            function veranderTekst() {

                              let tekst = document.getElementById("tekst");

                              tekst.innerHTML = "Hallo
                                student!";

                            }

Voorbeeld 2: Knop verandert kleur

HTML:

<p id="paragraaf">Tekst</p>

                            <button id="kleurKnop">

                              Maak rood

                            </button>

JavaScript:

let knop = document.getElementById("kleurKnop");


                            knop.addEventListener("click",
                            maakRood);


                            function maakRood() {

                              let p = document.getElementById("paragraaf");

                              p.style.color =
                            "red";

                            }

Event types#

Veelgebruikte events:

"click" → wanneer je klikt
"dblclick" → wanneer je dubbelklikt
"mouseover" → wanneer je muis over element gaat
"mouseout" → wanneer je muis van element af gaat
"keydown" → wanneer je een toets indrukt
"keyup" → wanneer je een toets loslaat

Voorbeeld met mouseover:

let box = document.getElementById("box");


                    box.addEventListener("mouseover",
                    vergrootBox);

                    box.addEventListener("mouseout",
                    verkleinBox);


                    function vergrootBox() {

                      box.style.fontSize = "30px";

                    }


                    function verkleinBox() {

                      box.style.fontSize = "16px";

                    }

Veelgemaakte fouten#

addEventListener("click", klik()) → addEventListener("click", klik) (geen haakjes bij functienaam!)
Vergeten om id in HTML te zetten
Event type verkeerd gespeld → "clik" werkt niet, moet "click" zijn
addEventListener toevoegen voordat HTML geladen is → zet code onderaan of gebruik DOMContentLoaded

Tips voor de toets#

Belangrijke punten om te onthouden:

Variabelen: let voor veranderende waardes, const voor constantes
String vs number: "10" + "10" = "1010" maar 10 + 10 = 20
Functies: eerst maken, dan aanroepen
getElementById: zoekt element op basis van id="" in HTML
If/else: gebruik === voor vergelijken, niet =
State: variabele buiten functie zetten om waarde te onthouden