10: Event Handlers

Invoking functions using event handlers in the HTML file.

Learning Goals

At the end of this Lesson, you will be able to:

  • Invoke (‘call’) functions using event handlers in a web page.

In your javascript/exercises folder, create a new sub-folder named event-handlers.

📄  Save the exercise file below to this new javascript/exercises/event-handlers sub-folder.

Event Handlers: Exercises

How functions are invoked

Typically, functions do not run as soon as the web page loads in the visitor's web browser. Instead, most functions wait until they are invoked (‘called’ or ‘fired’) by some user action. Here are two types of events that can call functions:

  • Event handlers: These are statements positioned either within the HTML or in the JavaScript code.
  • Event listeners: These are statements located within the JavaScript code that is loaded with the web page.   This is the modern and recommended way of calling functions.

A typical sequence would be as follows:

  • The visitor loads the web page that includes the HTML tags, the content, and the one or more JavaScript functions.   But the functions do not perform any action. They just wait passively until they are called.
  • The visitor clicks a button somewhere on the page that has an event handler or event listener attached to it.
  • The event handler or listener calls the function.
  • The function then carries out a particular task, such as calculating the sale price of an item or changing the content of the web page.

Working with event handlers

One way to call a function is to use an event handler. The user activates the event handler, and the event handler calls the function into action.

Three common events handlers are set out in the following table.

Event Handler

Description

onclick

This calls a function when the page visitor clicks once on an HTML element such as a button, image or item of text.

ondblclick

This calls a function when the page visitor clicks twice on an HTML element such as a button, image or item of text.

onmouseover

This calls a function when the page visitor holds the mouse pointer over an HTML element such as a button, image or item of text.

Event handlers are usually attached to buttons.

<button id="btn_1" onclick="clickBtn_1()">Click me Button 1</button>

But you can also link an event handler with an image or some text.

Event Handler

An HTML command in a web page that calls or triggers a function into action whenever a specific type of event is performed in or with the web page.

Exercise 10.1: Creating an inline event handler

Attach an inline (in HTML) event hander to btn_1 that, when clicked, changes the background color of box-color-1 to red.

Exercise 10.2: Creating an event handler in the JS code

Attach an inline event hander to btn_2 that, when clicked, changes the background color of box-color-2 to green. Attach the event handler as a method of btn_2. Use an anonymous or arrow function to perform the background color change.

 

 Back to Top