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

HTML

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

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

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>

JavaScript

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

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

JavaScript

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

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

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

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

JavaScript

// Event handler capturing the clicked element’s id
document.getElementById("my_button").addEventListener("click", function(event) {
  alert("You clicked on: " + event.target.id);
});

// Event handler capturing the clicked element’s id
document.getElementById("my_button").addEventListener("click", function(event) {
  alert("You clicked on: " + event.target.id);
});

HTML

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

HTML

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

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

JavaScript

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

JavaScript

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

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

JavaScript

// Event handler capturing the clicked element’s id
document.getElementById("my_button").addEventListener("click", function(event) {
  alert("You clicked on: " + event.target.id);
});