HTML DOM UiEvent

Last Updated : 14 Jun, 2023

The DOM UiEvent in HTML is an event that is triggered by the user interface belonging to the UiEvent Object. The two main purposes of the UI Event are:

Allows registration of event listeners and describes event flow through a tree structure.
Provide a common subset of the current event systems used in existing browsers.

Syntax:

Event_name = function

Return Value: This will return the object with the specified Event attached.

The event types belonging to the UiEvent Object are:

Event	function
abort	This event occurs when the loading of a media is aborted.
beforeunload	This event occurs before the document is about to be unloaded
error	This event occurs when an error occurred during the loading of a media file.
load	This event occurs when an object has loaded.
resize	This event occurs when the document view is resized.
scroll	This event occurs when an element's scrollbar is being scrolled.
select	This event occurs after the user selects some text for("input" and "textarea").
unload	This event occurs once a page has unloaded (for "body").

Example 1: This example is based on "onresize" event.

HTML

<!DOCTYPE html>
<html>
<style>
    body {
        width: 90%;
        color: green;
        border: 2px solid green;
        height: 40%;
        font-weight: bold;
        text-align: center;
        padding: 30px;
        font-size: 20px;
    }
    #demo {
        color: black;
    }
</style>
<!-- 'onresize' event -->
<body onresize="mainFunction()">
    <p>Welcome to GeeksforGeeks!</p>
    <p>Try to resize the browser window to
        display the windows height and width.</p>
    <p id="demo"></p>
    <script>
        function mainFunction() {
            let w = window.outerWidth;
            let h = window.outerHeight;
            let txt = "width of window = " + w +
                ", Height of window = " + h;

            document.getElementById("demo").innerHTML = txt;
        }
    </script>
</body>
</html>

Output:

Example 2: This example is based on the "load" event.

HTML

<!DOCTYPE html>
<html>
<style>
    body {
        width: 90%;
        color: green;
        border: 2px solid green;
        height: 40%;
        font-weight: bold;
        text-align: center;
        padding: 30px;
        font-size: 20px;
    }
    #demo {
        color: black;
    }
</style>
<!-- 'onload' event. -->
<body onload="myFunction()">
    <p>Welcome to GeeksforGeeks!</p>
    <p>This page loaded.</p>
    <script>
        function myFunction() {
            alert("Page is loaded");
        }
    </script>
</body>
</html>