---
title: "Explain the javascript event handling"  
description: "here you will learn about the event handling in the javascript with proper example."  
author: "Ashutosh Patel"  
published: 2025-02-14  
updated: 2025-02-14  
canonical: https://www.mindstick.com/articles/338543/explain-the-javascript-event-handling  
category: "javascript"  
tags: ["javascript", "javascript events", "javascript object"]  
reading_time: 3 minutes  

---

# Explain the javascript event handling

An **event** is an action that occurs on a web page, such as a click, hover, keypress, or form submission. JavaScript allows us to handle these events and execute code when they occur.

#### Types of Events in JavaScript

Here are some common events used in javascript,

| **Event Name** | **Description** |
| --- | --- |
| `click` | Triggered when an element is clicked |
| `dblclick` | Triggered on a [double click](https://www.mindstick.com/forum/155692/what-is-dfp-double-click-for-publisher) |
| `mouseover` | When the mouse enters an element |
| `mouseout` | When the mouse leaves an element |
| `keydown` | When a key is pressed |
| `keyup` | When a key is released |
| `change` | When an input value changes |
| `submit` | When a form is submitted |
| `load` | When the page finishes loading |
| `resize` | When the [window is resized](https://www.mindstick.com/forum/156653/change-background-color-of-window-when-window-is-resized) |

#### Ways to Handle Events in JavaScript

Here are several ways to handle the events in javascript that are as given,

**Inline [Event Handling](https://www.mindstick.com/articles/12724/event-handling-in-android) (Not Recommended)**

You can add [event handlers](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) directly to [HTML attributes](https://www.mindstick.com/forum/160677/explain-about-html-attributes).

```javascript
<button onclick="alert('Button clicked!')">Click Me</button>
```

*Note: This is not recommended as it clutters the HTML and makes it harder to manage.*

**Using JavaScript** `onclick` **Property**

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

*Note: Simple but only one [event handler](https://www.mindstick.com/forum/12660/button-event-handler-not-working) can be assigned per event.*

**Using** `addEventListener()` **(Best Practice/Recommended Approach)**

Allows for multiple event handlers and better control.

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

## Syntax:

```javascript
element.addEventListener(event, function, useCapture);
```

- `event` → event name (for example, "click")
- `function` → function to execute
- `useCapture` (optional) → true for event capturing, false for bubbling (default)

#### Event Object (`event`)

When an event occurs, an **event objec**t (`event`) is automatically passed to the event handler.

```html
<button id="btn">Click Me</button>
<script>
   document.getElementById("btn").addEventListener("click", function(event) {
       console.log(event.type);  // "click"
       console.log(event.target); // The button element
   });
</script>
```

#### Preventing Default Behavior (`preventDefault()`)

Some events have default behaviors (e.g., [form submissions](https://www.mindstick.com/forum/157866/how-do-you-handle-form-submissions-in-knockoutjs-applications), links). We can [prevent them](https://www.mindstick.com/forum/157783/what-are-the-common-encryption-related-vulnerabilities-in-asp-dot-net-and-how-can-you-prevent-them) using `event.preventDefault()`.

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

#### Stopping Event Propagation (`stopPropagation()`)

If you want to stop an event from bubbling up or being captured down, use `event.stopPropagation()` .

```html
<div id="outer">
   <button id="inner">Click Me</button>
</div>
<script>
   document.getElementById("inner").addEventListener("click", function(event) {
       alert("Button clicked!");
       event.stopPropagation();  // Stops propagation to parent
   });
   document.getElementById("outer").addEventListener("click", function() {
       alert("Div clicked!");
   });
</script>
```

Clicking the **button** only fires its event, not the `div`.

#### Keyboard Events (`keydown`, `keyup`)

```html
<input type="text" id="textBox">
<script>
   document.getElementById("textBox").addEventListener("keydown", function(event) {
       console.log("Key pressed: " + event.key);
   });
</script>
```

#### Mouse Events (`mouseover`, `mouseout`)

```html
<div id="box" style="width:100px; height:100px; background:lightblue;"></div>
<script>
   document.getElementById("box").addEventListener("mouseover", function() {
       this.style.background = "red";
   });
   document.getElementById("box").addEventListener("mouseout", function() {
       this.style.background = "lightblue";
   });
</script>
```

#### Form Events (`change`, `submit`)

```html
<form id="myForm">
   <input type="text" id="name">
   <button type="submit">Submit</button>
</form>
<script>
   document.getElementById("myForm").addEventListener("submit", function(event) {
       event.preventDefault();
       alert("Form submitted!");
   });
</script>
```

#### 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, add one listener to a common parent.

```html
<ul id="list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<script>
   document.getElementById("list").addEventListener("click", function(event) {
       if (event.target.tagName === "LI") {
           alert("You clicked: " + event.target.innerText);
       }
   });
</script>
```

*Note: Efficient for **dynamically added elements**.*

I hope you understand clearly about event handling in javascript.

Thanks.

**Also, read:** [Explain the JavaScript object](https://www.mindstick.com/articles/338542/explain-the-javascript-object)

---

Original Source: https://www.mindstick.com/articles/338543/explain-the-javascript-event-handling

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