Overview

A lot of what you do on the web is doing something when something happens.

For instance, when you click on a button, show a popup or when you click on a product add it to the cart.

In JavaScript, all the things that happen are called events and whenever you add an event listener to something on the page and that event happens (e.g. click, hover, submit a form), JavaScript creates an event object.

And this object is just a normal object like one you would create except event objects have all the information about the event. Here is how you get access to the event object. When you create an event listener and a callback function, pass in any text as an argument that will the event object. This can be a bit confusing but it’s important.

The function inside the event listener (also called the callback function) needs an argument in order for you to have access to the event object.

You can use any word you want but the most common words used are: “event”, “evt”, or “e”.

Then, inside the function whenever you use that word, that will be the event object. In the following example we have a button with a click handler attached and when you click it, it logs the event object in Chrome’s developer’s console.

Twirl open the object and look through it to see all the properties you have access to.

By pressing Ctrl + Shift + J on chrome you bring up a console window on your browser.

https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex10.js?actionable=true In order to access any of the properties in your callback function just reference them like a normal object. For instance, if you wanted to reference the parent element you would use event.target.parentElement.