🖱️ 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 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).
