What are events?

Suppose you click a button on a webpage, type in some letters in a text box, perform swiping gestures across the screen, or just simply scroll across the webpage; you're essentially performing certain actions on the webpage.

In the terminology of JavaScript, we call these actions, events.

Simply put:

An event is an action on a web page.

As we've seen before, the action can be clicking a button, typing text, swiping or even scrolling around, and way more than this. The action can either be a physical action carried out by the user, or an internal action carried out by the browser itself, like the completion of a resource's loading.

To get even simpler, an event is just something happening within the webpage - something that can be responded to, for instance showing an alert box on the click of a button.

As you might realise, the list of all such possible actions that can happen on a webpage is exhaustive - and so are events.

To get a realisation of this fact, consider doing a very simple exercise - just name 10 different actions you think can happen on a webpage and note them down on a piece of paper. See if you are able to only end at 10 - you'll more than likely go running past this limit!

As a consequence, JavaScript has a fairly sophisticated and a fully-fledged interface to aid developers in working with events i.e the Event API.

Now before we move on to explore it, we have to first unravel the question: why we even need events?

Why we need events?

Way back in the first Introduction chapter, we claimed that JavaScript can make a webpage dynamic and interactive. However, now that we have a little gist of events, we can granulate this claim further and rather say that it's events in JavaScript that play half the part in making a webpage interactive (the other half coming from the DOM).

Using events, is the sole way to add interactivity to an, otherwise static, HTML document. The user performs certain actions like typing in an input field, the JavaScript engine consequently fires the corresponding event, and finally some piece of code is executed in response to the event like displaying some suggestions to the user's query.

This is the idea on which events operate: monitor an action and then execute some code once it happens. Truly, an extremely simple and natural idea!

Events emulate a webpage as being an interactive object - with whom a user can communicate with, at his/her actions. Just carry out some actions and then see the webpage respond to them.

Without events a webpage is just a static display of HTML, nothing more than that. Imagine visiting a webpage with no event at all - you can't interact with literally anything, it's just the content to be read. There's no interactivity, no user experience, and at the end of the day no excitement about the website.

In short, events are one of the major features of JavaScript, developers must be aquainted with, right at the start of their JavaScript journeys.

Although, all this might sound fairly abstract at this point, once you do start working with events, you'll soon find yourself completely immersed in them, wanting to create endless applications for the web utilising one or the other!

Moving on...

Summarising this whole discussion, an event is simply an action performed on a webpage, either by the user or the browser itself, which serves to make it a whole lot more dynamic and responsive. Having grasped a little bit about JavaScript events, it's now time to move into some real business.

In the coming chapters, we'll start by discovering the various ways to assign event handlers to HTML elements, using event properties and listeners; before diving into some more involved topics such as event objects and event propagations. After covering all this, we'll finally head over to consider some real events in action, and see the numerous applications where there used.

To say it in one sentence: it's a unit of joy!