What are events?

The upcoming lessons are going to be focusing on events, and these are a useful part of JavaScript.

Events are like things which happen, such as a button clicked, a mouse passing over an image, a keyboard button pressed, and when these events happen, they send a signal for us to then do something.

Often, we listen out for these events to happen and then run some code such as a function. For example, you will probably have filled out a form on a web page and then hit submit. When the form is submitted, it fires a submit event.

We could attach a click event to an element such as a button, and this could run a function when clicked.

And have you ever visited a web page and went to leave by moving the mouse towards to close tab button, only to see an offer or promotion pop up? This is JavaScript events all happening in the background.

We could attach a mouseover event to an image, which maybe reveals the image as we move the mouse over it. The possibilities are huge.

Remember, JavaScript interacts with our HTML through the DOM, and again we are mixing JavaScript with our HTML elements.

So, we need to use the DOM’s event interface. Most HTML elements can accept an event listener being attached to it, and there are multiple ways of doing this which we will look at next.