Javascript and Events

Pages are presentations!

Click the Start Presentation button below to visualize this page as a presentation.

Start Presentation

Making an interactive web page requires a host of events: did users change the status of an element (e.g. checkbox) or just click it (e.g. a button/div)? Javascript components “listen” for events to happen and we can bind function to those events to trigger additional functionality.

Learning Objectives

1. Apply HTML, CSS, Markdown, and basic Javascript to develop well-structured, responsive World Wide Web Consortium (W3C) standards-compliant web sites.
2. Evaluate and implement web accessibility measures consistent with the Web Content Accessibility Guidelines (WCAG) version 2 specification.
3. Design front-end user experiences using accepted web design patterns, methods, and information structures.

Texts

The Coding Workbook, “Getting Started with CSS”

Javascript and Events

Consider the following JSX:

import React, {useState} from 'react';

const EventsButton = () => {
  const handleClick = (evt) => {
    alert("Button was clicked!");
    console.log(evt.target.className);
  };

  return (
    // 2. Pass the function reference to onClick
    <button class = "submitButton" onClick={handleClick}>
      Click Me
    </button>
  );
}

export default EventsButton;

The above renders the following:

Click Me

The previous code triggered an alert, a built-in browser function that creates a pop-over box containing a message. But, our console contains something much more interesting. To access your browsers inspect mode Ctrl + Shift + I (or Cmd + Option + I on Mac).

The evt

The evt (short for event) is an object that contains information about the object that triggered an event (onClick, onChange, et al.). In the above example, we are logging the className of the source element (i.e. the element producing the event). Here, this allows us to differentiate which control might have generated an event so that our components can respond appropriately.