HTML | DOM UiEvent

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 belongs 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 The 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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() {
            var w = window.outerWidth;
            var h = window.outerHeight;
            var txt = "width of window = " + w + 
                ", Height of window = " + h;
            
            document.getElementById("demo").innerHTML = txt;
        }
    </script>
  
</body>
  
</html>

chevron_right


Output :

Initial:

When width of the window increased to 110% value of the width and height will be:

Example-2: This example is based on “load” event.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


When the page loaded:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.