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.
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() { 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.
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> |
When the page loaded:
Supported Browsers:
- Google Chrome 1
- Mozilla Firefox 1
- Internet Explorer 9
- Edge 12
- Safari 1
- Opera 12.1
Please Login to comment...