Before you start learning about event handling, make sure you review your term 1 notes on Progressive Enhancement.

It’s also important to understand the difference between obtrusive and non-obtrusive JavaScript.

We always code with unobtrusive JS.

The principles of unobtrusive JavaScript

What is Unobtrusive JavaScript & Why it's Important?

What is Event Handling?

Event handling is the process of writing code that executes when a certain event occurs in your application.

We tend to think of events as things the user does, or triggers, such as clicking on an object, dragging an object, moving the mouse over/out of an object’s boundaries, pressing a key while an object has the focus, or submitting a form. These are all events

But there are a few events that aren’t directly triggered by a user, such as the DOM content loading, which are triggered by the browser or other components.

The Modern JavaScript Tutorial Introduction to Events lists a few of the more common events you can easily learn to write handlers for.

Introduction to events - Learn web development | MDN

How Event Handling Works

DOM Nodes are registered with an event handler (also called an event listener).

The programmer tells the node, “when this event happens, you execute this code”.
The programmer has to tell the node which event it should fire: a click event? a mouse-over event? a key-press event? Perhaps even more than one event?
The programmer also tells the node what function it should execute when that event occurs.
- e.g. when this <div> is clicked, execute the doSomething() function
- later you’ll also see that you can, in some circumstances, use an entire object instead of just a function

The programmer writes the event handler / event listener.

This is the function that will execute.
- in some circumstances, you can actually use an entire object as an event handler
- in that case, you’d write the entire object/class