~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/18js-dom-events

# JavaScript DOM Events

Events are actions in the browser — clicks, key presses, form submissions. You listen for them and respond.

## Adding Event Listeners

```javascript
button.addEventListener("click", () => {
  console.log("Clicked!");
});
```

**Syntax:** `element.addEventListener(event, handler)`

## Common Events

```javascript
// Click
button.addEventListener("click", handler);
button.addEventListener("dblclick", handler);

// Keyboard
input.addEventListener("keydown", handler);
input.addEventListener("keyup", handler);

// Form
form.addEventListener("submit", handler);
input.addEventListener("input", handler);

// Window
window.addEventListener("load", handler);
window.addEventListener("resize", handler);
```

## The Event Object

The handler receives an event object with useful properties:

```javascript
button.addEventListener("click", (event) => {
  console.log(event.type);      // "click"
  console.log(event.target);    // The clicked element
  console.log(event.timeStamp); // When it happened
});
```

## Preventing Default Behavior

Use `preventDefault()` to stop the browser's default action:

```javascript
form.addEventListener("submit", (event) => {
  event.preventDefault();  // Don't submit the form
  // Validate and handle manually
});
```

**Remember:** `event.preventDefault()` stops the default — like form submission or link navigation.

## Removing Event Listeners

You must pass the same function reference:

```javascript
function handleClick() {
  console.log("Clicked!");
  button.removeEventListener("click", handleClick);
}

button.addEventListener("click", handleClick);
```

**Tip:** Anonymous functions can't be removed. Use named functions when you need to remove listeners.

## Complete Example: Form Validation

```javascript
let form = document.getElementById("form");
let nameInput = document.getElementById("name");
let emailInput = document.getElementById("email");
let errorDiv = document.getElementById("errors");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  let errors = [];

if (nameInput.value.trim() === "") errors.push("Name is required");
  if (!emailInput.value.includes("@")) errors.push("Invalid email");

if (errors.length > 0) {
    errorDiv.textContent = errors.join("\n");
  } else {
    form.reset();
  }
});
```

## Best Practices

- **Use `addEventListener`** — Not inline `onclick` handlers
- **Call `preventDefault()` when needed** — Prevent unwanted reloads
- **Remove listeners when done** — Prevent memory leaks
- **Use event delegation** — One listener for dynamic elements
- **Check if element exists** — Avoid null errors

## Common Mistakes

- **Forgetting `preventDefault()`** — Page reloads on form submit
- **Using anonymous functions** — Can't remove them later
- **Adding listener on null** — Element must exist first
- **Wrong event type** — `click` vs `mousedown` matters
- **Not checking `event.target`** — May handle wrong element

No changes yet

cancel