An in-depth guide to event listeners

When creating interactive web pages, developers often need to execute some actions when a given event occurs. Changing the image of a carousel when a user clicks on one of its arrows, showing a tooltip when a word is hovered, or validating a field when a user moves the focus onto another field are common examples. To execute these actions, we have to add event listeners to the elements of the page.

In this article, I’ll explain what event listeners are, and how to add and remove them from a web page. I’ll show several examples and talk about patterns to avoid when dealing with event listeners. The topic will be discussed in depth. So, even if you’re an expert, you might not know some of the details covered.

Trick of the day: The time element

Trick of the day: The time element

HTML5 introduced several new elements to address many common use cases that developers have faced over the years. As an example you can think to the new audio and video elements that allow you to avoid the use of third-party software like Flash and Silverlight to play audios and videos. While media streams play an important role on the web, the W3C and the WHATWG have also tried to enhance the semantic of web pages. One of these new elements is the time element.