Learn JavaScript Event Listeners In 18 Minutes

Whether you're a complete beginner, just learning how to use event listeners, or if you've built multiple projects on your own using event listeners all the time, I can guarantee you there's something in this video you don't already know. Welcome back to WebDevSimplified. My name is Kyle, and my job is to simplify the web for you so you can start

building your dream project sooner. So, if that sounds interesting, make sure you subscribe to the channel for more videos just like this. Now, like I mentioned in the intro, we're going to be covering a ton of information related to event listeners. We're going to start at the very basics of how you create an event listener and

how they actually work. Then we're going to talk about capturing, bubbling, and delegation, and how all of that works because it's incredibly important to understand, and most people really don't understand it well enough. And then finally, we're going to talk about a few minor tidbits here and there of bonuses that come with event listeners. So, this

video is going to be jam-packed full of information, so make sure you stick around till the end to get all of the information you need. Now, to get started, I have a really simple index.html file where we have a grandparent. Inside that, we have a parent, and inside that, we have a child. And you can see on this

right-hand side, we have this red grandparent, blue parent, and then green child. And what we're going to do is set up event listeners for when we click on these elements. So, the very first thing I want to do is set up a click event listener on the grandparent. In order to do that, all we