Open In App

HTML DOM UiEvent

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 

Supported Browsers:

  • Google Chrome 1
  • Mozilla Firefox 1
  • Internet Explorer 9
  • Edge 12
  • Safari 1
  • Opera 12.1


Last Updated : 14 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads