JavaScript Events

What is an Event?

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked

Often, when events happen, you may want to do something.

Registering Event Listeners

To execute JavaScript code when events are detected you need to register event listeners/handlers for the DOM element the event is occurring on.

There are multiple ways to register event listeners. Here are the two most common used approaches:

HTML Attribute

<button onclick="alert('Hello World!')">

addEventListener Method

// Assuming myButton is a button element
myButton.addEventListener('click', greet);

function greet(event){

  // print and have a look at the event object

  console.log('Hello World', event);
  alert('Hello World!')
}

MDN - Events and the DOM

DOM Event Types

There are many different HTML DOM events, some of the most commonly used are:

blur
change
click
load
keyUp
scroll

For a complete list of events review w3Schools.com - DOM Events

DOM Event Interface

Once the event is triggered and a callback function is called, an event object is also automatically passed to the callback function as the first parameter (see 'event' parameter in greet function in the above example).

The event object contains valuable information about the event itself as well as which element the event got triggered on.

event.type - A string containing the event's type
event.target - A reference to the element that dispatched the event
event.preventDefault() - Prevents default action on an element (i.e. going to href on a an tag)

MDN - DOM Event Interface

More Resources

Exercises

Take a look at the index.html file in this repository. Open the file in the Chrome web browser. You should see a checkout page created with the Bootstrap CSS framework.

Let's create some user interactions by using JavaScript events. (Do not change the HTML itself to solve any exercises. Try to accomplish everything by using JavScript ;))

Alert 'Welcome to our Checkout! Glad you are buying your stuff from us.' when the HTML page has finished loading. Refresh the page.
Remove the event listener you created in the last exercise. Make sure no alert box pops up once you refresh the page.
Alert 'Promo Code Applied' if a user clicks the 'Redeem' button.
1. Use the HTML attribute as your first solution
2. Refactor your solution to use the addEventListener method
As soon as a user starts typing in the promo code text field, have the Promo code update on every key stroke. For example if a user starts typing "S" the text "EXAMPLECODE" should change to "S". If the user types the next letter "SU" the Promo code text should read "SU" and so forth.
If a user clicks or focuses on any text input field make the corresponding label to the input field should change to the color blue by applying the class "text-primary" to the label.
Let's build a simple form validation:
1. If a user clicks on the "Continue to checkout" button check if any text input fields are empty.
2. If a text input field is empty apply the class "is-invalid" to it.