JavaScript HTML DOM Events Examples

DOM (Document Object Model) events in JavaScript allow developers to interact with user actions on web pages dynamically. Here’s a list of practical examples to understand and implement DOM events.

1. Handling a Button Click

Capture a button click and perform an action:

function onButtonClick() {
    alert("Button clicked!");
}

HTML:

<button onclick="onButtonClick()">Click Me</button>

2. Mouseover and Mouseout Events

Change an element’s style when the mouse hovers over or leaves it:

function onMouseOver(element) {
    element.style.color = "red";
}

function onMouseOut(element) {
    element.style.color = "black";
}

HTML:

<p onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)">Hover over me!</p>

3. Input Field Focus and Blur

Change the border color of an input field when it gains or loses focus:

function onFocus(element) {
    element.style.border = "2px solid green";
}

function onBlur(element) {
    element.style.border = "1px solid gray";
}

HTML:

<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" placeholder="Focus me">

4. Key Press Event

Display the key pressed by the user in real-time:

function onKeyPress(event) {
    document.getElementById("keyOutput").textContent = `Key Pressed: ${event.key}`;
}

HTML:

<input type="text" onkeypress="onKeyPress(event)" placeholder="Type something">
<p id="keyOutput"></p>

5. Form Submission

Prevent a form from submitting and display a message:

function onSubmit(event) {
    event.preventDefault();
    alert("Form submission prevented!");
}

HTML:

<form onsubmit="onSubmit(event)">
    <input type="text" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>

6. Window Load Event

Display a message when the page has fully loaded:

window.onload = function () {
    alert("Page has fully loaded!");
};

7. Double Click Event

Trigger an action on double-click:

function onDoubleClick() {
    alert("Double-click detected!");
}

HTML:

<button ondblclick="onDoubleClick()">Double Click Me</button>

8. Listening for Custom Events

Use addEventListener for better control over events:

document.getElementById("myButton").addEventListener("click", function () {
    alert("Button clicked using addEventListener!");
});

HTML:

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

9. Prevent Default Behavior

Stop default behaviors like opening a link in a new tab:

function preventLink(event) {
    event.preventDefault();
    alert("Default action prevented!");
}

HTML:

<a href="https://example.com" onclick="preventLink(event)">Don't Open Link</a>

10. Event Propagation

Demonstrate stopPropagation to prevent event bubbling:

function outerDivClick() {
    alert("Outer DIV clicked!");
}

function innerDivClick(event) {
    alert("Inner DIV clicked!");
    event.stopPropagation();
}

HTML:

<div onclick="outerDivClick()" style="padding: 20px; background-color: lightgray;">
    Outer Div
    <div onclick="innerDivClick(event)" style="padding: 10px; background-color: lightblue;">
        Inner Div
    </div>
</div>

11. Event Delegation

Handle multiple elements dynamically using delegation:

document.getElementById("parent").addEventListener("click", function (event) {
    if (event.target && event.target.matches("button")) {
        alert(`Button clicked: ${event.target.textContent}`);
    }
});

HTML:

<div id="parent">
    <button>Button 1</button>
    <button>Button 2</button>
</div>

For more in-depth tutorials, visit The Coding College, where you can explore advanced JavaScriptDOM event handling techniques!

Leave a Comment