Common Events: click, input, submit, and More

In the previous lesson, we learned how to attach event listeners using addEventListener(). Now, let's explore the most common types of events you'll encounter and how to respond to them. Events can be broadly categorized based on the type of interaction or change they represent.

Understanding these events is essential for building responsive and interactive user interfaces.

1. Mouse Events

These events respond to user interactions with a mouse or pointing device.

• click: Fires when an element is clicked (both mousedown and mouseup occur on the same element). Most commonly used for button clicks, link activations.
• dblclick: Fires when an element is double-clicked.
• mousedown: Fires when a mouse button is pressed down over an element.
• mouseup: Fires when a mouse button is released over an element.
• mouseover: Fires when the mouse pointer enters an element's area.
• mouseout: Fires when the mouse pointer leaves an element's area.
• mousemove: Fires continuously as the mouse pointer moves while it is over an element.

2. Keyboard Events

These events respond to user interactions with the keyboard.

• keydown: Fires when a key is pressed down. It fires repeatedly if the key is held down.
• keyup: Fires when a key is released.
• keypress: (Deprecated) Fires when a key that produces a character value is pressed down. Not recommended for modern use; use keydown or keyup with event.key for character values.

Useful Event object properties for keyboard events:

• event.key: The value of the key pressed (e.g., 'a', 'Enter', 'ArrowUp').
• event.code: The physical key pressed (e.g., 'KeyA', 'Enter', 'ArrowUp').
• event.altKey, event.ctrlKey, event.shiftKey, event.metaKey: Booleans indicating if modifier keys were pressed.

3. Form Events

These events are crucial for handling user input within forms.

• submit: Fires when a form is submitted. This event fires on the <form> element itself, not on the submit button. You often preventDefault() on this event to handle form submission via AJAX.
• input: Fires immediately when the value of an <input>, <select>, or <textarea> element is changed by the user. (Useful for real-time validation or display).
• change: Fires when the value of an <input>, <select>, or <textarea> element is changed and the element loses focus (for text inputs) or when the selection is committed (for checkboxes, radio buttons, select dropdowns).
• focus: Fires when an element (like an input field or button) receives focus.
• blur: Fires when an element loses focus.

4. Document and Window Events

These events relate to the document as a whole or the browser window.

• DOMContentLoaded: Fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This is usually the best time to run your JavaScript code that modifies the DOM.
• load: Fires when the entire page has loaded, including all dependent resources such as stylesheets and images. Useful if your JavaScript relies on all assets being available.
• resize: Fires when the browser window has been resized.
• scroll: Fires when an element's scrollbar is being manipulated. Can be attached to window for page scroll or specific elements for their own scroll.

Exercise: Interactive Form Feedback

Instructions: Create a simple form with feedback based on common events.

<style>
  body { font-family: Arial, sans-serif; }
  .form-group { margin-bottom: 15px; }
  label { display: block; margin-bottom: 5px; font-weight: bold; }
  input[type="text"], textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .feedback {
    font-size: 0.9em;
    color: grey;
    margin-top: 5px;
  }
  .error-message {
    color: red;
    font-weight: bold;
  }
  button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #0056b3;
  }
</style>

<form id="registrationForm">
  <h1>Register</h1>
  <div class="form-group">
    <label for="regUsername">Username:</label>
    <input type="text" id="regUsername" placeholder="Min 5 chars">
    <div id="usernameFeedback" class="feedback"></div>
  </div>

  <div class="form-group">
    <label for="regEmail">Email:</label>
    <input type="text" id="regEmail" placeholder="Enter valid email">
    <div id="emailFeedback" class="feedback"></div>
  </div>

  <div class="form-group">
    <label for="message">Message (optional):</label>
    <textarea id="message" rows="4"></textarea>
  </div>

  <button type="submit">Register</button>
</form>
<p id="submissionStatus" style="margin-top: 20px; font-weight: bold;"></p>

Your Task:

1. Username Validation (Input Event):
   • Select regUsername and usernameFeedback.
   • Add an input event listener to regUsername.
   • Inside the listener: If the input's value.length is less than 5, set usernameFeedback.textContent to "Username too short!" and add error-message class. Otherwise, set it to "Looks good!" and remove error-message class.
2. Email Validation (Change Event):
   • Select regEmail and emailFeedback.
   • Add a change event listener to regEmail.
   • Inside the listener: If the input's value does not include "@" or ".", set emailFeedback.textContent to "Invalid email format!" and add error-message class. Otherwise, set it to "Valid email." and remove error-message class.
3. Form Submission (Submit Event):
   • Select registrationForm and submissionStatus.
   • Add a submit event listener to registrationForm.
   • Inside the listener:
     • preventDefault() the default form submission.
     • Check if both username and email validations pass (you'll need to re-check their current values/classes).
     • If valid, set submissionStatus.textContent to "Registration Successful!" and style it green.
     • If invalid, set submissionStatus.textContent to "Please fix errors before submitting." and style it red.