events

Learn how event capturing, targeting, and bubbling work in JavaScript; how to prevent an event's default behavior; how to stop event propagation; and more.

A guide to working with CSS animation and transition events.

In this article, we will discuss ways browser events can be handled, default browser actions and event propagation.

I typically recommend using event delegation for event listeners instead of attaching them to individual elements. Let’s say wanted to listen to clicks on every element with the .sandwich class. You might do this. var sandwiches = document.querySelectorAll('.sandwich'); sandwiches.forEach(function (sandwich) { sandwich.addEventListener('click', function (event) { console.log(sandwich); }, false); }); But with event delegation, you would listen for all clicks on the document and ignore ones on elements without the .

Yesterday, I wrote about why event delegation is better than attaching events to specific elements. In response, my buddy Andrew Borstein asked: What’s the difference between event delegation/bubbling/capturing? This is a great question that I get fairly often. The terms are often used interchangeably (sometimes by me, oops!), which can cause some confusion. So let’s clear that up today. tl;dr: event delegation is the technique, bubbling is what the event itself does, and capturing is a way of using event delgation on events that don’t bubble.

I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area. Is something like t...

Event Delegation is an old trick to keep your JavaScript DOM enhancements independent of content