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