Event Delegation in JavaScript

Browser events enable developers to regulate and systematically manage the interactivity of web applications. Implementing something like web forms, navigation headers, initialization scripts, and sorting buttons requires an understanding of browser events. So developers need to familiarize themselves with event delegation techniques so that they may be effective in diagnosing bugs and implementing useful features.

API Overview

The most commonly used events in web applications could be 'click', 'mouseover', 'keypress' and 'focus'. But there are many types of events in the browser and they can be found here. Events can either be specified inline in the HTML elements or they can be explicitliy delegated using JavaScript.

Bubbling vs Capturing

In the case of nested elements clicking on one element can cause a chain recation and trigger event on the outer most element. To manage this the concept of event capturing and event bubbling comes in handy. If