Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM UiEvent

  • Last Updated : 28 Jan, 2019

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:

Eventfunction
abortThis event occurs when the loading of a media is aborted.
beforeunloadThis event occurs before the document is about to be unloaded
errorThis event occurs when an error occurred during the loading of a media file.
loadThis event occurs when an object has loaded.
resizeThis event occurs when the document view is resized.
scrollThis event occurs when an element’s scrollbar is being scrolled.
selectThis The event occurs after the user selects some text for(“input” and “textarea”).
unloadThis event occurs once a page has unloaded (for “body”).

Example-1: This example is based on “onresize” event.






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

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.




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

When the page loaded:

Supported Browsers:

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :