Browser Events and Event Listeners

Browser Events and Event Listeners

With element manipulation down, we can now learn how to handle browser events. 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, 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
                var button = document.querySelector("#button");

                // second, define what you want to happen
                var 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!
	
Clicking on the button three times.
Clicking on the button three times.

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:

	
    var clickCallback = function(event) {
        console.log("You've clicked on the button!");
        console.log(event);
    }
	
The MouseEvent has a lot of information.
The MouseEvent has a lot of information.

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 targetted 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 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.