Class Days
25 Events

Class 25: Events

Instructions

Introduction

Our first video (opens in a new tab) gives us a broad overview of the idea of an event (opens in a new tab), and how these events can trigger our program to respond or handle the event (opens in a new tab) appropriately.

The resources linked above link directly to Mozilla's excellent documentation, which better prepares you to navigate large sets of documentation in the future.

I also want to make sure that you have a reference to all Javascript Events (opens in a new tab) from W3C that were covered in the video.

Implementing Mouse Events

The next video quickly reviews on mouse events (opens in a new tab).

Here are some links to learn more about the specifics of some of the mouse events and handlers covered in the video above.

And here is some more theoretical style code to help with these listeners

    // assuming there is a highlight class based off of CSS
 
    function highlight(elem) {
        elem.className = "highlight";
    }
 
    function unhighlight(elem) {
        elem.className = "";
    }
    
    function setupHandlers() {
        let someElem = document.getElementById("someId");
        someElem.addEventListener('mouseenter', highlight);
        someElem.addEventListener('mouseleave', unhighlight);
    }

Refactoring and Improving Code with Functions

We take a small digression in our next video snippet (opens in a new tab) to talk about how to refactor code when it starts to become unweildly, and how we can avoid having messy code when we use more functions.

For example, we could use a function to help set a highlight on multiple elements

function setupHighlight(elem_id) {
    let elem = document.getElementById(elem_id);
    elem.addEventListener("mouseenter", () => {
        highlight(elem);
    });
    elem.addEventListener("mouseleave", () => {
        unhighlight(elem);
    });
}
 
function setupHandlers() {
    setupHighlight("some_id");
    setupHighlight("another_id");
}

Exploring, Implementing and Debugging Dragging Events

The next video covers dragging (opens in a new tab) in all different forms. We start by understanding more on how dragging works and then work through an example that implements and debugs potential errors that popup when getting dragging to work.

The mozilla documentation has an excellent dragging example (opens in a new tab) that you can follow and utilizes best practices.

Understanding Timers and Animation

Our last video for today (opens in a new tab) covers how we can use javascript's timers to create animation in our webpages.

Here are some links to different properties and functions needed to do animations:

A quick note about the requestion animation frame, as they have a warning that mentions that one should use the first frame to calculate how much time has elapsed (which would use the timestamp that we saw). Not doing that calculation means that animations will run faster on different screens.

23 Dom26 SQL