Events and Event Listeners

Events are actions or occurrences that happen in the browser, like a button being clicked or a key being pressed. Event listeners are functions that “listen” for these events and then execute code in response. They’re what make web pages dynamic and interactive!

What is an Event?

An event is a signal that something has happened. Common events include:

Click: When a user clicks an element (like a button or link).
Mouseover: When the mouse pointer moves over an element.
Keydown: When a key is pressed down on the keyboard.
Load: When a webpage finishes loading.
Submit: When a form is submitted.

What is an Event Listener?

An event listener is a function that waits for a specific event to occur on a specific HTML element. When the event happens, the event listener runs a piece of JavaScript code. This code can then update the page, send data, or trigger other actions.

Basic Example: Button Click

Let’s make a button that changes text when clicked.


<!DOCTYPE html>
<html>
<head>
<title>Button Click Example</title>
</head>
<body>
 
<button id="myButton">Click Me!</button>
<p id="myParagraph">Hello, world!</p>
 
<script>
  const button = document.getElementById("myButton");
  const paragraph = document.getElementById("myParagraph");
 
  button.addEventListener("click", function() {
    paragraph.textContent = "Button Clicked!"; // Change the paragraph text
  });
</script>
 
</body>
</html>

Explanation:

We get the button and paragraph elements using document.getElementById().
button.addEventListener("click", function() { ... }); adds an event listener. It says, “When the button is clicked, execute the code inside the curly braces.”
Inside the function, paragraph.textContent = "Button Clicked!"; changes the paragraph’s text.

Practical Usage: Form Validation

Here’s an example of using an event listener to validate a form before submission:


<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
</head>
<body>
 
<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <button type="submit">Submit</button>
</form>
 
<script>
  const form = document.getElementById("myForm");
 
  form.addEventListener("submit", function(event) {
    const emailInput = document.getElementById("email");
    const emailValue = emailInput.value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email validation regex
 
    if (!emailRegex.test(emailValue)) {
      alert("Please enter a valid email address.");
      event.preventDefault(); // Prevent the form from submitting
    }
  });
</script>
 
</body>
</html>

Explanation:

We get the form element.
form.addEventListener("submit", function(event) { ... }); listens for the “submit” event on the form.
Inside the function, we get the email input and its value.
We use a regular expression (emailRegex) to check if the email is valid.
If the email is invalid, we show an alert and event.preventDefault() stops the form from submitting.

Key Takeaways

Events are actions that occur in the browser (clicks, key presses, etc.).
Event listeners “listen” for events and trigger code when the event happens.
addEventListener() is the primary method for attaching event listeners.
Event listeners are essential for making web pages interactive.
Modern best practice: Use event listeners to separate your JavaScript logic from your HTML structure (e.g. avoid inline event handlers like <button onclick="myFunction()">).