How DOM Events Work in HTML

Introduction

In this article you will learn how to work with HTML DOM Events. HTML DOM allows JavaScript to react to HTML events.

Examples

The following are examples of the use of HTML events:

  • When a user clicks the mouse
  • When the web page has loaded
  • When the mouse moves over an element
  • When an input field is changed

1.      When a user clicks the mouse

In this example, the content of the <h1> element is changed when a user clicks on it.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Click</title>

<script>

    function changetext(id) {

        id.innerHTML = "C# CORNER";

    }

</script>

</head>

<body>

<h1 onclick="changetext(this)">Click on this text!</h1>

</body>

</html>

Result

1.jpg           2.jpg

2.   When the web page has loaded

The onload and onunload events are triggered when the user enters or leaves the page.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Page loaded</title>

</head>

<body onload="checkCookies()">

<script>

    function checkCookies() {

        if (navigator.cookieEnabled == true) {

            alert("Page are enabled")

        }

        else {

            alert("Page are not enabled")

        }

    }

</script>

<p>An alert box should tell you if your browser has enabled page or not.</p>

</body>

</html>

3.jpg

3.
      When the mouse over an element

In this example, when the user moves the mouse into the element the content is changed.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Mouse over the content</title>

</head>

<body>

<div onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" style="background-color:aqua;width :120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>

    function MouseOver(obj) {

        obj.innerHTML = "C# Corner"

    }

    function MouseOut(obj) {

        obj.innerHTML = "MCN SOLUTIONS"

    }

</script>

</body>

</html>

Result

4.jpg       5.jpg
4.      When an input field is changed

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Input Field</title>

<script>

    function MyFunction() {

        var x = document.getElementById("FName");

        x.value = x.value.toUpperCase();

    }

</script>

</head>

<body>

Enter your name: <input type="text" id="FName" onchange="MyFunction()"/>

<p>When you leave the input field, a function is triggered that transforms the input text to upper case.</p>

</body>

</html>

Result

6.jpg

Leave the input field.

7.jpg


Similar Articles