The 10 Most Important DOM Events

And how to work with them in Javascript

One of the most integral APIs provided by browsers is the Event API. This API defines how events are created and consumed in programs run in the browser. Javascript’s role on the web is to add interaction to content and style, and most of the interaction added is dependent on user action, making the Events API an essential in the Javascript developer’s toolbelt.

credit: https://www.edureka.co/blog/javascript-events/

An event is any action which takes place in the DOM (for all intents and purposes this means the browser window). An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element.

Events follow a “Bubbling” pattern in which they are first “captured” by the browser window , travel down through the document tree to the target element, and then “bubble’ back to the window object (that’s a story for another day, if you are interested, This article provides a great overview of event bubbling and how it works, along with a fantastic codepen illustrating the process).

Events can be captured and handled using one of two methods:

1. The EventTarget.addEventListener()…