DEV Community

Discussion on: A Guide to Handling Browser Events

Collapse
 
budyk profile image
Budy • Edited

Thanks for sharing.. Just want to add, using arrow function as eventListener callback will make the element lose the this context...

var span = document.querySelector('span');
span.addEventListener('click', (event) => {
   console.log(this); // Window Object
}

compared to this

var span = document.querySelector('span');
span.addEventListener('click', function(event) {
   console.log(this); // Element Object
   this.innerHTML = 'Hola';
}
Collapse
 
fc250152 profile image
Nando

Budy, sorry but I don't notice any difference in the two snippets ... maybe the latter should be a regular function declaration such as "function(event) {...}" ?
thank you, happy Easter!

Collapse
 
budyk profile image
Budy

Sorry, I've updated the snippet :)