Browser Archives - Aurelio De Rosa blog

Event delegation in JavaScript

One of the most common tasks a web developer deals with is to add event listeners to the elements of a page. Event listeners are employed to perform one or more actions when a given event occurs on one or more elements.

For example, by using an event listener we could display a dialog when a button is clicked by a user. In this case, the developer is running a single action (showing the dialog) when a click event occurs on one element (the button). Another example is a pagination widget. The latter is made of many links that have to lead the user to a given page when clicked. Here, the developer is performing the same, single action on many elements. The final example I want to mention is to use an event listener with elements that don’t yet exist in the page but will. This happens when injecting elements in the web page after an Ajax request is performed.

In this article, I’ll discuss how you, as a web developer, can optimize the addition of event listeners in all these situations by employing a technique called event delegation.

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.

The State of the Web Notifications API

Today I was reviewing my HTML5 API demos repository to keep its information updated and relevant. In the last two weeks Google has released Chrome 38, Opera has released Opera 25, and Mozilla has released Firefox 33. Every time a new version of a browser is available, it may introduce support for new APIs or change an already supported API to accommodate changes in the specifications. For these reasons, a general check was much needed.

In this article I’ll discuss what’s the current state of the Web Notifications API, what browsers support it, and what versions of the specifications. I’ll use this post also to summarize some inconsistencies I’ve found along the way.

How to Solve the Problem of @font-face Inside Media Queries

Mobile connections aren’t as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn’t work for some browsers: all the versions of Internet Explorer and FireFox 10 and lower. This article discusses a solution for this problem that balances performances and hacks.