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.
I have created a codepen collection where you will find code snippets for the series.
Finally..
So let's jump right into it and get started.