Launching Interactions: Understanding and Handling JavaScript Events in HTML

Lesson Overview

Hello! Are you ready to unravel JavaScript events ? In today's lesson, we will focus on understanding events and how JavaScript incorporates them into an HTML page. We'll delve into events, how they generate action, and event handlers . Let's get started!

Understanding the Button Tag and onClick Attribute in HTML

Before we jump further into the lesson, let's delve into the HTML <button> tag and how it interacts with the onClick attribute. The <button> tag in an HTML document creates a clickable button that performs a specified action when a user clicks on it. Imagine it as a doorbell to a house - when pressed, it triggers a response. The onClick attribute, on the other hand, is an event attribute. It is used within HTML tags to call a JavaScript function when an onclick event (the button click in our case) occurs. Let's see an example of how to use these two together: HTML <button onClick="alert('You clicked me!')">Click me!</button> In this code, we have a button that says "Click me!". When you click this button, an alert box with the message "You clicked me!" will pop up on your screen. This response is triggered because of the onClick attribute in the button tag that activates the JavaScript function alert('You clicked me!') .

What are Events in JavaScript?

In the world of JavaScript, events are the actions or occurrences that take place in the browser which you can respond to with JavaScript - be it something that the browser does, or something a user does. Think of events as messages being sent when something happens. An event could be anything from a click event fired when a user clicks on an HTML element, to a page load event fired by the browser when it finishes loading a web page, to an input event triggered when the user writes something into an input field. Why are events important? They allow us to make our web pages interactive. Instead of just presenting static information, we can create pages that respond to user actions, which results in a much more engaging user experience.

Introduction to Events in JavaScript

Within JavaScript, events are categorized into two types - user-triggered and browser-triggered. For instance, a mouse click triggers a 'click' event. Similarly, a page finish loading sparks a 'load' event. Essentially, every interaction between the user and the webpage could be viewed as a potential JavaScript event. To respond to a user's interaction, JavaScript provides a variety of event types like 'click', 'mouseover', 'keyup', etc. These events can be associated with specific HTML elements like buttons, inputs and divs to trigger JavaScript code when the event occurs. There are also some events triggered by the browser. For example, the 'load' event is triggered after the webpage has completely loaded all content including images, stylesheets, scripts, etc. This event is often used to execute JavaScript code which needs the entire DOM to be available.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Event Handlers in JavaScript

Event Handlers activate a specific action when an event occurs. They can be created three ways:

Inline Event Handlers: Event handlers can be annotated directly within the HTML elements. Check out the example below:

HTML

<button onClick="alert('Hello there!')">Click Me!</button>

<button onClick="alert('Hello there!')">Click Me!</button>

Clicking the button triggers an alert, "Hello there!".

As DOM Object Properties: Event handlers can also use properties of the HTML DOM object.

HTML

<script>
   function sayHello() {
      alert('Hello there!');
   }
   document.getElementById('my_button').onclick = sayHello;
</script>

<button id="my_button">Click me!</button>

<script>
   function sayHello() {
      alert('Hello there!');
   }
   document.getElementById('my_button').onclick = sayHello;
</script>

<button id="my_button">Click me!</button>

In this script, the event handler is associated with the onclick DOM property of the button element.

Using addEventListener() Method: Event handlers can also be assigned using the addEventListener method of the DOM element.

Let's delve into one of the most powerful arrowheads in our quiver for handling events in JavaScript - the addEventListener() method. This method allows us to designate certain functionalities when an event occurs.

Here's the structure of the addEventListener() method:

target.addEventListener(type, listener);

target is the HTML element we're attaching the event listener to.
type is a string specifying the type (or name) of the event.
listener is the function to execute when the event occurs.

For instance, we have a button that prompts an alert when clicked. An addEventListener() method for such a scenario would look like this:

JavaScript

document.getElementById("my_button").addEventListener("click", function() {
  alert("Button clicked!");
});

document.getElementById("my_button").addEventListener("click", function() {
  alert("Button clicked!");
});

Here, document.getElementById("my_button") is our target, "click" is our event type, and the function that follows is our event listener. The complete construct designates that when we click on the button (our target), the webpage should alert "Button clicked!".

Another example of using the addEventListener method: