🖱️ DOM Events

Last Updated: 26th October 2025

Events are actions or occurrences in the browser that JavaScript can respond to.
Examples: click, mouseover, keydown, submit, etc.
Using events, we can make a website interactive.

Hinglish Tip 🗣: Event ka matlab hai browser me hone wali koi activity — jaise button click, mouse hover, key press. JS se hum uska response control karte hain.

Common Events\

Event Type	Example	Description
click	button click	Triggered when an element is clicked
mouseover	hover over element	Triggered when mouse moves over an element
mouseout	leave element	Triggered when mouse leaves an element
keydown	key press	Triggered when a key is pressed down
keyup	key release	Triggered when a key is released
input	text input	Triggered when user types in input field
submit	form submission	Triggered when a form is submitted

Event Handling Methods

Inline Event Handling

You can attach event handlers directly to HTML elements.
It is Not recommended to use inline event handlers for complex logic.

<button onclick="alert('Button Clicked!')">Click Me</button>

Using DOM Property

Can assign only one handler per event.
It is recommended to use DOM event handlers for complex logic.

<button id="btn">Click Me</button>

<script>
  const btn = document.getElementById("btn");
  btn.onclick = function () {
    alert("Button Clicked!");
  };
</script>

Using Event Listener (Recommended)

Attach event handlers to HTML elements using the addEventListener method.
Allows you to add multiple event handlers for the same event.
It is recommended to use event listeners for complex logic.
Syntax:

element.addEventListener(event, handler, options);

<button id="btn">Click Me</button>

<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    alert("Button Clicked via addEventListener!");
  });
</script>

Event Object

The event object contains information about the event that triggered the event handler.
It provides access to event properties such as type, target, currentTarget,keypress etc.
event.target is the element that triggered the event.
event.currentTarget is the element that the event listener is attached to.
event.preventDefault() can be used to prevent the default behavior of the event.
event.stopPropagation() can be used to stop the event from bubbling up to parent elements.

<button id="btn">Click Me</button>

<script>
  btn.addEventListener("click", function (event) {
    console.log("Event type:", event.type); // Output: click
    console.log("Target element:", event.target);
  });
</script>

Event Delegation

Handle events for many child elements using one parent.
Useful for dynamic content.

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  const ul = document.getElementById("list");
  ul.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      alert("Clicked: " + e.target.textContent);
    }
  });
</script>

Hinglish Tip 🗣: Event delegation ka matlab hai ek parent ke child ke events ko handle karna.

Keyboard Events and Properties

Keyboard events are triggered when the user interacts with the keyboard.
Common events:
- keydown → fired when a key is pressed down.
- keyup → fired when a key is released.
- keypress → fired when a key is pressed (deprecated in modern browsers).
event.key → returns the key value ("a", "Enter", "ArrowUp", etc.)
event.code → physical key code ("KeyA", "Enter", "ArrowUp")
event.ctrlKey, event.shiftKey, event.altKey → check if modifier keys are pressed.

Example 1: Every key pressed will be logged in the console.

<input type="text" id="input" placeholder="Type something..." />

<script>
  const input = document.getElementById("input");

  input.addEventListener("keydown", function (event) {
    console.log("Key pressed:", event.key); // logs pressed key
  });
</script>

Example 2: Detecting Special Keys

<script>
  document.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
      alert("Enter key pressed!");
    } else if (event.key === "Escape") {
      alert("Escape key pressed!");
    }
  });
</script>

Example 3: Key Combination Example (Shortcut)

<script>
  document.addEventListener("keydown", function (event) {
    if (event.ctrlKey && event.key === "s") {
      event.preventDefault(); // prevent default browser save
      alert("Custom Save Shortcut Triggered!");
    }
  });
</script>

Hinglish Tip 🗣: Modifier keys ke sath (Ctrl, Shift, Alt) custom shortcuts bana sakte ho. event.preventDefault() default behavior block karta hai.

Example 4: Arrow Keys

<script>
  document.addEventListener("keydown", function (e) {
    switch (e.key) {
      case "ArrowUp":
        console.log("Move Up");
        break;
      case "ArrowDown":
        console.log("Move Down");
        break;
      case "ArrowLeft":
        console.log("Move Left");
        break;
      case "ArrowRight":
        console.log("Move Right");
        break;
    }
  });
</script>

💡 Quick Practice

Detect when Tab key is pressed and alert a message.
Create a Ctrl+Enter shortcut to submit a form.
Log every key pressed in an input field in uppercase.
Use arrow keys to move a div on the screen (advanced).

← Previous Next →