Essential JavaScript Events for Developers

Building interactive applications relies heavily on understanding how to handle user interactions. Here is a list of seven essential JavaScript events that every developer should know:

*Code snippets are written in React and TypeScript.

---

1. onClick

• Purpose: Triggers when an element is clicked.
• Usage: Commonly used for buttons, links, and other clickable elements to handle user actions like form submissions, opening modals, etc.

<button onClick={handleClick}> Click Me </button>

const handleClick = () => {
  console.log("Button clicked!");
};

---

2. onChange

• Purpose: Triggered when the value of an input element changes.
• Usage: Essential for form inputs to update the component's state as the user types.

---

import { useState } from "react";

function MyComponent() {
  const [inputValue, setInputValue] = useState(""); // Define state for input value

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value); // Update the state with the new input value
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleInputChange} // Handle the change event
    />
  );
}

export default MyComponent;

Note the use of React.ChangeEvent in the handleInputChange function.
It is very important to use the correct event type. Here are some of the most common event types:

• React.ChangeEvent for onChange on input elements.
• React.FormEvent for onSubmit on forms.
• React.KeyboardEvent for onKeyDown on input elements.
• React.MouseEvent for onMouseEnter and onMouseLeave on div elements.

---

3. onBlur

• Purpose: Triggers when an element loses focus.
• Usage: Often used for form validation after the user moves away from an input field.

<input type="text" onBlur={handleBlur} />

const handleBlur = () => {
  console.log("Input lost focus");
};

---

4. onFocus

• Purpose: Triggers when an element gains focus.
• Usage: Useful for actions when an input field is focused, like showing a tooltip or highlighting the field.

<input type="text" onFocus={handleFocus} />

const handleFocus = () => {
  console.log("Input gained focus");
};

---

5. onSubmit

• Purpose: Triggers when a form is submitted.
• Usage: Handles form submissions, typically preventing the default form submission behavior to process it with JavaScript.
• Important: The onSubmit event should be attached to the <form>element, not the submit button. This ensures correct handling regardless of whether the user clicks the submit button or presses Enter. The button element has type="submit", which triggers the form's onSubmit event when clicked.

<form onSubmit={handleSubmit}>
  <input type="text" value={inputValue} onChange={handleInputChange} />
  <button type="submit"> Submit </button>
</form>

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  console.log("Form submitted");
};

---

6. onKeyDown

• Purpose: Triggers when a key is pressed down.
• Usage: Handles keyboard events, such as submitting a form when the Enter key is pressed.

<input type="text" onKeyDown={handleKeyDown} />

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  if (event.key === "Enter") {
    console.log("Enter key pressed");
  }
};

---

7. onMouseEnter and onMouseLeave

• Purpose: Triggers when the mouse pointer enters or leaves an element.
• Usage: Handles hover effects, like showing a tooltip or changing an element's style.

<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
  Hover over me
</div>

const handleMouseEnter = () => {
  console.log("Mouse entered");
};

const handleMouseLeave = () => {
  console.log("Mouse left");
};

Building a language learning app and need an API? Read How to use Free dictionary API