Why

I have been working with Javascript frameworks/libraries such as Angular and React for a long time. I have created complex apps with React which involved event handling as well. I learned the Event Model for React using its official documentation. While doing so, I stumbled upon many terms in the documentation such as event propagation, the default behavior of elements, event bubbling, or capturing, etc. I resolved my queries with the help of a quick google search for time being to get the job done. But I never really understood the key concepts of the Javascript event model in its entirety.

I finally decided to face the devil and started exploring DOM Events using Vanilla JS(I hate using this term, as for many years I thought it is another JS framework that I need to learn). But to my surprise, it is not so hard and I actually enjoyed learning it for a couple of hours over the last few days (Yeah, that's right. you need hours to understand it, not weeks, as I had imagined).

So, this series is my attempt to share the simplistic version of DOM events you need to get familiar with in order to use them in a web app or to explore them at a deeper level.

What

Following are the sections of this series. You can go through it serially or in random order. I will specify pre-requisites in each blog post which I strongly recommend reading.

• Event registration
• Event phases
• Event propagation and delegation
• Event object

I have created a mind map for reference using coggle.

Coggle map

I have created a codepen collection where you will find code snippets for the series.

Codepen collection

Finally..

So let's jump right into it and get started.