---
title: "Explain the HTML DOM Event Methods in JavaScript"  
description: "Let's see the detailed explanation of the HTML dom event methods with proper examples."  
author: "Ashutosh Patel"  
published: 2025-03-18  
updated: 2025-03-18  
canonical: https://www.mindstick.com/articles/338798/explain-the-html-dom-event-methods-in-javascript  
category: "javascript"  
tags: ["javascript", "javascript events", "html events", "javascript method"]  
reading_time: 4 minutes  

---

# Explain the HTML DOM Event Methods in JavaScript

[HTML event](https://www.mindstick.com/articles/336246/what-is-the-event-loop-in-javascript-and-how-does-it-work) methods in JavaScript allow us to handle [user interactions](https://www.mindstick.com/forum/158690/how-can-you-handle-user-interactions-such-as-button-clicks-using-jquery) such as button clicks, keypresses, mouse movements, etc. The [HTML DOM](https://www.mindstick.com/blog/304387/explain-the-concept-and-use-dom-manipulation) provides various ways to add and manage [event handlers](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) in JavaScript.

#### Ways to attach event handlers

There are three common ways to attach events in JavaScript which are as given below,

**Using the** `onclick` **Attribute (Inline [Event Handler](https://www.mindstick.com/forum/12660/button-event-handler-not-working))**

It is defined directly in the HTML element.

```html
<button onclick="showMessage()">Click Me</button>
<script>
   function showMessage() {
       alert("Button Clicked!");
   }
</script>
```

***Note:** This is not recommended as it mixes HTML with JavaScript.*

**Using** `element.onclick` **(Property Event Handler)**

It is defined in JavaScript.

```html
<button id="btn">Click Me</button>
<script>
   document.getElementById("btn").onclick = function() {
       alert("Button Clicked!");
   };
</script>
```

***Note:** It has the limitation that one event handler can be assigned per event.*

**Using** `addEventListener()` **(Recommended)**

It is the most flexible and preferred method.

```html
<button id="btn">Click Me</button>
<script>
   document.getElementById("btn").addEventListener("click", function() {
       alert("Button Clicked!");
   });
</script>
```

Advantages of `addEventListener()`

- Allows multiple event handlers for the same event.
- Supports event propagation (capture and bubble phase).
- Can dynamically remove event handlers.

#### Common Event Methods

Here are key event-related methods in JavaScript,

`addEventListener(event, function, useCapture)`

- It attaches an [event listener](https://answers.mindstick.com/qa/93766/how-to-add-event-listener-on-html-elements).

```javascript
document.getElementById("btn").addEventListener("mouseover", function() {
   console.log("Mouse Hovered!");
});
```

- `useCapture` (optional) controls the event flow (`true` for the capturing phase, `false` for the bubbling phase).

`removeEventListener(event, function)`

It removes an event listener.

```javascript
function showMessage() {
   alert("Event Removed!");
}
document.getElementById("btn").addEventListener("click", showMessage);
document.getElementById("btn").removeEventListener("click", showMessage);
```

***Note:** The function reference must match exactly*

`event.preventDefault()`

This prevents the default action of an element (for example, preventing form submission).

```html
<a href="https://google.com" id="link">Click Me</a>
<script>
   document.getElementById("link").addEventListener("click", function(event) {
       event.preventDefault(); // Stops navigation
       alert("Default action prevented!");
   });
</script>
```

`event.stopPropagation()`

This prevents an event from being raised in the DOM.

```html
<div id="outer">
   <button id="inner">Click Me</button>
</div>
<script>
   document.getElementById("outer").addEventListener("click", function() {
       alert("Outer Div Clicked!");
   });
   document.getElementById("inner").addEventListener("click", function(event) {
       alert("Button Clicked!");
       event.stopPropagation(); // Prevents event from reaching the outer div
   });
</script>
```

***Note:** Without stopPropagation() , clicking the button would trigger the event on the outer <div> as well.*

#### Event Object Properties

When an event occurs, **an event object** (`event`) is automatically sent to the handler.

## Example

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Event Handling Example</title>
<style>
       .highlight { color: red; font-weight: bold; }
   </style>
</head>
<body>
<button id="btn">Click Me</button>
<script>

document.getElementById("btn").addEventListener("click", function(event) {
   console.log("Event Type:", event.type); // "click"
   console.log("Target Element:", event.target); // Button element
   console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});
</script>
</body>
</html>
```

#### Event Delegation (Efficient Event Handling)

Instead of adding [event listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements) to multiple elements, delegate the event to a common parent.

**[Handling Multiple](https://www.mindstick.com/interview/34064/handling-multiple-exceptions) Buttons Efficiently**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Event Handling Example</title>
<style>
       .highlight { color: red; font-weight: bold; }
   </style>
</head>
<body>
<div id="buttonContainer">
   <button class="btn">Button 1</button>
   <button class="btn">Button 2</button>
   <button class="btn">Button 3</button>
</div>
<script>
   document.getElementById("buttonContainer").addEventListener("click", function(event) {
       if (event.target.classList.contains("btn")) {
           alert(event.target.innerText + " Clicked!");
       }
   });
</script>
</body>
</html>
```

**Advantages of [Event Delegation](https://www.mindstick.com/forum/157814/how-does-event-delegation-work-in-jquery)**

- Improves performance by reducing event listeners.
- Works dynamically for elements added later.

#### Common JavaScript Events

| Event | Description |
| --- | --- |
| click | Fires when an element is clicked |
| dblclick | Fires on a double-click |
| mouseover | Fires when the mouse enters an element |
| mouseout | Fires when the mouse leaves an element |
| keydown | Fires when a key is pressed |
| keyup | Fires when a key is released |
| submit | Fires when a form is submitted |
| focus | Fires when an input gains focus |
| blur | Fires when an input loses focus |
| change | Fires when input value changes (e.g., dropdown) |
| contextmenu | Fires on right-click |

## Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Event Handling Example</title>
   <style>
       #box { width: 100px; height: 100px; background: gray; text-align: center; line-height: 100px; }
   </style>
</head>
<body>
   <div id="box">Hover Me</div>
   <button id="toggleBtn">Toggle Event</button>
   <script>
       let box = document.getElementById("box");
       function changeColor() {
           box.style.backgroundColor = "blue";
       }
       box.addEventListener("mouseover", changeColor);
       document.getElementById("toggleBtn").addEventListener("click", function() {
           if (box.style.backgroundColor === "blue") {
               box.removeEventListener("mouseover", changeColor);
               box.style.backgroundColor = "gray";
           } else {
               box.addEventListener("mouseover", changeColor);
           }
       });
   </script>
</body>
</html>
```

I hope you understand clearly.

Thanks!

Also, Read: [Explain the HTML DOM Style Object in JavaScript](https://www.mindstick.com/articles/338562/explain-the-html-dom-style-object-in-javascript)

---

Original Source: https://www.mindstick.com/articles/338798/explain-the-html-dom-event-methods-in-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.