HTML DOM Events

JavaScript provides a variety of events that can be used to trigger functions or scripts when certain actions occur on a web page. Here are some commonly used events in the HTML DOM:

click

This event occurs when an element is clicked with the mouse.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript onclick Event</h1>
<h2>Welcome to WebTutor</h2>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "WebTutor";
    }
</script>

</body>
</html>

Preview

submit

This event occurs when a form is submitted.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript onsubmit Event</h1>
<form action="" onsubmit="myFunction()">
    <label for="name">Enter Name</label><br>
    <input type="text" name="name" id="name">
    <input type="submit" value="Submit">
</form>

<script>
    function myFunction() {
        alert("The form was submitted");
    }
</script>

</body>
</html>

Preview

keydown

This event occurs when a key is pressed down.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript onkeydown Event</h1>
<input type="text" placeholder="Click here, then press down a key." onkeydown="myFunction()"/>
<p id="demo"></p>

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Down Key";
    }
</script>

</body>
</html>

Preview

keyup

This event occurs when a key is released.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript onkeyup Event</h1>
<input type="text" placeholder="Click here, then press up a key." onkeyup="myFunction()"/>
<p id="demo"></p>

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Up Key";
    }
</script>

</body>
</html>

Preview

mouseenter

This event occurs when the mouse enters an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript onmouseenter Event</h1>
<p onmouseenter="myFunction(this)">Welcome to WebTutor</p>

<script>
    function myFunction(x) {
        x.style.fontSize = "30px";
        x.style.color = "red";
    }
</script>

</body>
</html>

Preview

mouseleave

This event occurs when the mouse leaves an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript onmouseleave Event</h1>
<img src="https://webtutor.dev/images/webtutor.png" onmouseleave="myFunction(this)" alt="Logo"/>

<script>
    function myFunction(x) {
        x.style.width = "50px";
        x.style.height = "50px";
    }
</script>

</body>
</html>

Preview

load

This event occurs when the web page is fully loaded.

Example

<!DOCTYPE html>
<html>

<body onload="myFunction()">
<h1>JavaScript onload Event</h1>

<script>
    function myFunction() {
        document.write("Page is loaded")
    }
</script>

</body>
</html>

Preview

unload

This event occurs when the web page is unloaded or closed.

Example

<!DOCTYPE html>
<html>

<body onunload="myFunction()">
<h1>JavaScript onunload Event</h1>

<script>
    function myFunction() {
        document.write("Page is onunload")
    }
</script>

</body>
</html>

Preview

resize

This event occurs when the size of the browser window changes.

Example

<!DOCTYPE html>
<html>

<body onresize="myFunction()">
<h1>JavaScript onresize Event</h1>
<p id="demo"></p>

<script>
    function myFunction() {
        let w = window.outerWidth;
        let h = window.outerHeight;
        let txt = "Window size: width=" + w + ", height=" + h;
        document.getElementById("demo").innerHTML = txt;
    }
</script>

</body>
</html>

Preview

scroll

This event occurs when the user scrolls through the web page.

Example

<!DOCTYPE html>
<html>
<style>
    .red { color: red; }
</style>

<body onscroll="myFunction()" style="height:2000px">
<h1 id="myh1" style="position: fixed">JavaScript onscroll Event</h1>

<script>
    function myFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            document.getElementById("myh1").className = "red";
        } else {
            document.getElementById("myh1").className = "";
        }
    }
</script>

</body>
</html>

Preview

You can add event listeners to certain components or to the document object itself to take advantage of these events. Events can also be used to start animations, change how items appear, and perform other interactive tasks on a website. You can design dynamic and engaging online experiences for your visitors by using event listeners and the many events offered by the HTML DOM.

DOM Elements

DOM Event Listener

HTML DOM Events

click

Example

submit

Example

keydown

Example

keyup

Example

mouseenter

Example

mouseleave

Example

load

Example

unload

Example

resize

Example

scroll

Example

Links

Tutorials

Connect with us