DEV Community

Cover image for DOM Event Handling
_Khojiakbar_
_Khojiakbar_

Posted on

3

DOM Event Handling

What is an Event?

An event is an action or occurrence that happens in the browser, such as a user clicking a button, a webpage loading, or a mouse hovering over a link. JavaScript allows you to "listen" for these events and execute code in response.


Common Types of Events

  1. Mouse Events: click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
  2. Keyboard Events: keydown, keyup, keypress
  3. Form Events: submit, change, focus, blur
  4. Window Events: load, resize, scroll
  5. Touch Events:(for mobile) touchstart, touchend, touchmove,

Event Listeners

To handle events, you need to set up event listeners. An event listener is a function that is called when an event occurs. There are several ways to add event listeners in JavaScript:

Using addEventListener()

The most recommended way to attach event listeners is by using the addEventListener() method. It allows you to add multiple events to the same element and provides better control over event handling.

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button was clicked!');
});
Enter fullscreen mode Exit fullscreen mode

Inline Event Handlers

You can also add event handlers directly in the HTML using attributes like onclick, onmouseover, etc. However, this method is less flexible and not recommended for modern web development.

<button onclick="alert('Button was clicked!')">Click Me</button>
Enter fullscreen mode Exit fullscreen mode

Using DOM Properties

Another way to add event handlers is by setting the event property of a DOM element. This method can only attach one event handler at a time.

document.getElementById('myButton').onclick = function() {
  alert('Button was clicked!');
};
Enter fullscreen mode Exit fullscreen mode

Event Object

When an event occurs, it generates an event object that contains useful information about the event. This object is automatically passed to the event handler function.

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Event type:', event.type);
  console.log('Element:', event.target);
  console.log('Mouse coordinates:', event.clientX, event.clientY);
});
Enter fullscreen mode Exit fullscreen mode

Removing Event Listeners

You can remove an event listener using the removeEventListener() method.

function handleClick() {
  alert('Button was clicked!');
}

document.getElementById('myButton').addEventListener('click', handleClick);

// Remove the event listener
document.getElementById('myButton').removeEventListener('click', handleClick);
Enter fullscreen mode Exit fullscreen mode

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay