• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 8/5/19

Use events

Log in or subscribe for free to enjoy all this course has to offer!

Working with events is pretty satisfying! You can make things happen with JavaScript as user-related events happen on the page.

No matter which type of event you're working with, an Event object is created when a particular event (like a click or a key press) happens and can be used within function so you can make custom things happen. This Event object has properties that provide information about the event and also comes with methods to use with it!

Some properties include type, which returns the event type, or target which returns the DOM element on which the event happened.

The code below uses the Event object to display the type of the triggered event and the text of the target element when clicking the button on the page. This object is used by the function that handles the event as a parameter, named e. You can name the parameter whatever you like.

Here's some starter HTML.

<html>

<head>
    <meta charset="utf-8">
    <title>Event handling</title>
</head>

<body>
    <button id="theButton">Click me!</button>

    <script src="../js/course.js"></script>
</body>

</html>

...and here's some basic JavaScript to add on the side. This code lets you see the particular events that happen to the button.

// Show an event's type and target
document.getElementById("theButton").addEventListener("click", function (e) {
console.log("Event: " + e.type +
", target text: " + e.target.textContent);
});

Common event handling

Key presses

The most common solution for reacting to key presses on a keyboard involves handling keypress events that happen on a web page (the DOM body  element, which corresponds to the global variable called document  in JavaScript). 

To manage the press and release of any key, you'll use the keydown and keyup  events. This example uses the same function to manage two events. This time, the key's code is accessible in thekeyCode property of the Event object.

// Show information on a keyboard event
function keyboardInfo(e) {
    console.log("Keyboard event:" + e.type + ", key: " + e.keyCode);
}

// Integrate this function into key press and release:
document.addEventListener("keydown", keyboardInfo);
document.addEventListener("keyup", keyboardInfo);

Mouse clicks

Mouse clicks on any DOM element produce a click  type element.

The Event object associated with a click event has a button property which lets you know the button the mouse used (left or right), as well as clientX and clientY properties that return the horizontal and vertical coordinates of the place where the click happened. These coordinates are defined relative to the page zone currently shown by the browser. 

The below code shows information on all click events that happen on a web page. These events are managed by a function called mouseInfo

// Return the name of the mouse button
function getMouseButton(code) {
    var button = "unknown";
    switch (code) {
    case 0: // 0 is the code for the left mouse button
        button = "left";
        break;
    case 1: // 1 is the code for the middle mouse button
        button = "middle";
        break;
    case 2: // 2 is the code for the right button
        button = "right";
        break;
    }
    return button;
}

// Show information about a mouse event
function mouseInfo(e) {
    console.log("Mouse event: " + e.type + ", button " +
        getMouseButton(e.button) + ", X : " + e.clientX + ", Y : " + e.clientY);
}

// Add mouse click event listener
document.addEventListener("click", mouseInfo);

You can use mousedown and mouseup events similarly to how the keydown and keyup events used with keyboard events! The code below associates the same handler to two events:

// Handle mouse button press and release
document.addEventListener("mousedown", mouseInfo);
document.addEventListener("mouseup", mouseInfo);

Page loading

Depending on how complex it is, a web page can take time to be loaded 100% by the browser. You can add an event listener to know when this happens; it's an event listener on the window object. This avoids messy situations where JavaScript interacts with pages that aren't fully loaded.

The following code displays a message in the console once the page is fully loaded.

// Web page loading event
window.addEventListener("load", function () {
    console.log("The page has been loaded!");
});

Go farther with events

Event propagation

The DOM represents a web page as a hierarchy of nodes. Events triggered on a child node are going to then trigger on the parent node, then the parent node of the parent node, up until the root of the DOM (the document variable). This is called event propagation.

To see propagation in action, add this HTML code in the <body> tag of your HTML code.

<p id="para">A paragraph with a <button id="propa">button</button> inside
</p>

Now add the complementary JavaScript code below to course.js. It adds click event handlers on the button, its parent (the paragraph), and the parent of that too (the root of the DOM).

// Click handler on the document
document.addEventListener("click", function () {
    console.log("Document handler");
});
// Click handler on the paragraph
document.getElementById("para").addEventListener("click", function () {
    console.log("Paragraph handler");
});
// Click handler on the button
document.getElementById("propa").addEventListener("click", function (e) {
    console.log("Button handler");
});

The result in the browser console demonstrates the propagation of click events from the button up to the document level. You clicked the button, which means you also clicked the paragraph, which means you also clicked the document. But maybe you only want an event to kick off once the button is clicked and not count its larger ecosystem!

Event propagation can be interrupted at any moment by calling the stopPropagation method on the Event object from a function that manages an event. This is useful to avoid the same event being handled multiple times.

Adding a line in the button's click handler prevents the click event from propagating everywhere in the DOM tree.

// Click handler on the button
document.getElementById("propa").addEventListener("click", function (e) {
    console.log("Button handler");
    e.stopPropagation(); // Stop the event propagation
});

Summary

Here's the main info you should remember from this chapter.

  • You can make a web page interactive by writing JavaScript tied to events within the browser.

  • Numerous types of events can be handled. Each event type is associated with an Event object that contains information about the event itself and its properties.

  • keypress,keydown, and keyup events let you react to keyboard events.

  • click,mousedown, and mouseup let you react to mouse events.

  • Page loading and closing are associated with the events load and beforeunload respectively.

  • An event propagates within the DOM tree from its node of origin until the document root. This propagation can be interrupted with the stopPropagation method. 

Example of certificate of achievement
Example of certificate of achievement