Whenever a user interacts with the page, this action is considered an event. An example of an event can be a click, a hover, a page load, a keypress, and many others things.
Working with events is a large part of creating interactivity on your page.
Listening for Events
To perform an action when an event triggers, you first need to listen to it. Listening to an event is basically telling the browser "hey, when this event occurs, I want to execute this piece of code".
That piece of code is packaged in the form of a function called the callback function, and is provided to the browser.
The browser now listens for the event and once it occurs it will run the callback function, doing whatever it is that you want to happen.
Adding an Event Listener
The secret that makes this all work is the addEventListener function that is called on an element of your choosing.
The function takes the name of the event you want to listen to as the first parameter, and the function to run when that event happens as the second parameter.
Let's see this in action with a simple click event listener.
<!DOCTYPE html>
<html>
<head>
<title>Click Event Listener</title>
</head>
<body>
<button id="button">Click here for a console log!</button>
<script>
// first, get the button
const button = document.querySelector("#button");
// second, define what you want to happen
const clickCallback = function(event) {
console.log("You've clicked on the button!");
}
// third, add the event listener on the click event
button.addEventListener("click", clickCallback);
</script>
</body>
</html>
You've clicked on the button!
By attaching an event listener to our button, the code defined inside clickCallback runs every time we click on the button.
In case you missed it, the callback function receives an object detailing what happened, and it's named event. Here is some of the data when you print out the object:
const clickCallback = function(event) {
console.log("You've clicked on the button!");
console.log(event);
}
With the information provided inside event, you can use it to customize the path your code takes inside the function.
Some useful information found in the Mouse Event object include:
type: What event occurred.timeStamp: When the event occurred.x: The x value of the point where the user clicked on.y: The y value of the point where the user clicked on.target: What element was the targeted element.
Inline Event Listeners
An alternative way to accomplish the above is by using inline event listeners. That is, to give elements special attributes that the browser can interpret to then run your code whenever an event fires.
<!DOCTYPE html>
<html>
<head>
<title>Click Event Listener</title>
</head>
<body>
<button id="button" onclick="clickCallback()">Click here for a console log!</button>
<script>
function clickCallback(event) {
console.log("You've clicked on the button!");
}
</script>
</body>
</html>
You've clicked on the button!
We gave the button element an onclick attribute, with the name of the function we want executed inside and the browser took care of the rest.
More Native Events
A click event isn't the only event you can listen to. There are many events you can choose from to create some really great experiences.
click: When the element has been clicked.keydown: When the user presses down on a key.change: When the element has changed.mouseover: When the element is hovered over.mouseout: When the element is no longer hovered over.mousemove: When the mouse moves while hovered over the element.load: When the document or element has finished loading.
Custom Events
In addition to the native browser events, you can define, dispatch, and listen to your own custom events. This allows you to create some pretty unique functionality. Let's say you want an event for eating food:
const event = new Event("eat");
element.addEventListener("eat", function(event) {
console.log("Eating food!");
}, false);
element.dispatchEvent(event);
The first bit defines a new event with the name eat. The second bit adds an event listener for that event, and so when that event is fired, the callback function is executed. The last bit is the line of code that dispatches, or fires, the event. Once fired, the listener will pick up on it and run the callback function, logging Eating food! to the console.
