Gunpriya's blog

JavaScript Events part-7

Gunpriya Sarpate's photo
Gunpriya Sarpate
·

4 min read

"Welcome to today's lesson on JavaScript event handlers! In the world of web development, making web pages interactive is key, and that's where event handlers come into play. Imagine a scenario where you want something to happen when a user clicks a button, submits a form, or moves their mouse over an image. JavaScript event handlers are like the magic behind these actions.

Simply put, event handlers are functions that respond to events triggered by user interactions or other sources, such as timers or network activity. They allow you to create dynamic and engaging web applications. So, if you've ever wondered how to make your web pages react to user input, you're in the right place. By the end of this lesson, you'll have a solid understanding of how to use event handlers to bring your web projects to life!"

Types of events:

let's explore the different types of events that JavaScript event handlers can respond to. Understanding these event types is crucial because it helps us create interactive web experiences. Here are the primary event categories:

  1. Click Events: These events occur when a user clicks on an element, such as a button, link, or image. They're widely used for actions like opening a modal, submitting a form, or toggling a menu.

  2. Mouse Events: Mouse events are triggered by mouse interactions. Common examples include mouseover (when the mouse enters an element) and mouseout (when the mouse leaves an element). You can use these events for tasks like creating tooltips or changing the appearance of elements on hover.

  3. Keyboard Events: These events respond to keyboard input. Examples include keydown (when a key is pressed down) and keyup (when a key is released). Keyboard events are handy for implementing features like search bars or keyboard shortcuts.

  4. Form Events: Form events are associated with form elements like input fields and submit buttons. Events like submit are used to handle form submissions, while change events track changes in input values, making them useful for real-time validation or updating content.

Inline Event Handlers

How event handlers can be attached directly to HTML elements using inline attributes like onclick, onmouseover, etc. Use examples to illustrate how this works:

<button onclick="alert('Button clicked!')">Click Me</button>

Emphasize that inline event handlers are not considered best practice and can make code harder to maintain as applications grow.

Unobtrusive Event Handling.

The concept of unobtrusive event handling, which involves separating HTML from JavaScript. Show how to select elements using document.getElementById() or document.querySelector() and then attach event listeners using methods like addEventListener():

Syntax:

The basic syntax for adding an event listener is as follows:

element.addEventListener(eventType, eventHandlerFunction);

<button id="myButton">Click Me</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>
  1. Click Event Listener:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Click Event Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <p id="message"></p>
  <script>
    const myButton = document.getElementById('myButton');
    const messageElement = document.getElementById('message');

    myButton.addEventListener('click', function() {
      // This code runs when the button is clicked.
      messageElement.textContent = 'Button clicked!';
    });
  </script>
</body>
</html>

When you click the "Click Me" button, the text "Button clicked!" will appear on the webpage.

  1. Mouse Over and Mouse Out Event Listeners:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse Events Example</title>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <p id="message"></p>
  <script>
    const myDiv = document.getElementById('myDiv');
    const messageElement = document.getElementById('message');

    myDiv.addEventListener('mouseover', function() {
      messageElement.textContent = 'Mouse over the div!';
    });

    myDiv.addEventListener('mouseout', function() {
      messageElement.textContent = 'Mouse out of the div!';
    });
  </script>
</body>
</html>

When you hover over the blue div, it displays the messages "Mouse over the div!" and "Mouse out of the div!" as you move your mouse in and out.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form Submission Event Example</title>
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
  </form>
  <p id="message"></p>
  <script>
    const myForm = document.getElementById('myForm');
    const messageElement = document.getElementById('message');

    myForm.addEventListener('submit', function(event) {
      event.preventDefault(); // Prevents the default form submission behavior.
      messageElement.textContent = 'Form submitted!';
    });
  </script>
</body>
</html>

When you submit the form by clicking the "Submit" button, the text "Form submitted!" will be displayed on the webpage, and the default form submission will be prevented.

JavaScripteventsjsdomDOM