JS 1.8 Event handling
Table of contents
Events är förändringar i browserns- eller operativsystemets miljö. De går att lyssna på, så vi kan köra viss kod när ett event händer.
För att “lyssna” efter event kan vi antingen använda metoden addEventListener() eller “on”-properties som onclick, onmouseover osv. De senare är dock inte lika effektiva, då de inte låter oss ha flera event listeners på samma element.
Document- och window object
Window-objektet är tabben i webbläsaern som du har öppen. I window-objektet finns till exempel info om höjd och bredd på fönstret, alerts och prompts.
Document-objektet är det “inre” fönstret, rooten av varje node i DOM. Laddar du in en HTML-sida i webbläsaren så är dokument-objektet hela den sidan.
Exempel
Event listener som lyssnar efter klick i tabben:
window.addEventListener('mousedown', (event) => {
alert('window');
console.log(event);
});
I objektet vi console-loggar (MouseEvent) hittar vi en massa info om eventet, som vilken knapp på musen som trycktes ner, om till exempel alt eller ctrl var intryckta samtidigt, var i fönstret det klickades etc.
Target
Propertyn target i eventet är en referens till det objekt vilket eventet triggades på.
const theTarget = someEvent.target;
Value: EventTarget
Exempel
Gör en lista och lägg in i <body>
const ul = document.createElement('ul');
document.body.appendChild(ul);
const li1 = document.createElement('li');
const li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
Funktion som tar ett event som parameter, och sätter eventets targets visibility-attribut till “hidden”
function hide(e) {
// e.target refers to the clicked <li> element
// This is different than e.currentTarget, which would refer to the parent <ul> in this context
e.target.style.visibility = 'hidden';
}
Lägg in en event listener på listan för att lyssna efter klick, och i så fall kör funktionen ovan
// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);