Web API UI Events

Last Updated : 22 Nov, 2023

Web API UI Events is a system that is used to handle the event that occurs in the UI layer. This UI event can be a mouse event or keyboard event. This API provides some use full modules to handle events. These events helped us to design the dynamic UI for the web pages and web applications. There are two ways events can occur one is by Element of Dom and another is by window of web browser. When an event is triggered an ‘inputEvent’ is passed to the event handler which contains.

Interfaces:

CompositionEvent: It allows us to enter character which is not present on the keyboard.
FocusEvent: It tells us about the element that receives or loses the focus.
InputEvent: It is associated with input entered by the user.
KeyboardEvent: For keyboard up-down events.
MouseEvent: It is associated with mouse events such as mouse move, mouse over and out, and mouse button up and down.
WheelEvent: It is associated with an event that is triggered by a mouse wheel or touchpad.
UIEvent: It is the base interface for all other interfaces.

Events:

abort: It is fired when resource loading is aborted.
auxclick: It is triggered when non non-primary pointer button is clicked.
beforeinput: It is triggered just before the DOM is about to update with user input.
blur: It is fired when the element loses focus.
click: It is fired when the user clicks the button.
compositioned: It is triggered when the text composition system has finished its session.
compositionstart: It is triggered when text composition is started with the user.
compositionupdate: It is triggered when the text composition system updates its text with a new character.
contextmenu: It is triggered just before the context menu is invoked.
dbclick: It is triggered when the primary pointer button is double-clicked.
error: It is triggered when a resource fails to load.
focus: It is triggered when an element receives focus.
focusin: It is triggered when an element is just about to receive focus.
focusout: It is triggered when an element is just about to lose focus.
input: It is triggered by user input updates.
keydown: It is fired when the user presses a key.
keyperss: It is fired when the user releases the key.
load: Fired when the whole page has loaded.
wheel: It is fired when the mouse wheel rotates.
unload: It is fired when the document being unloaded.
mousedown: It triggerd when mouse button is presses while it is on element.
mouseenter: It is triggered when mouse enters the boundary of element.
mouseleave: It is triggered when mouse moves out from boundary of element and its parents.
mousemove: It is triggered when mouse moves on element.
mouseout: It is triggered when mouse moves outside of element.
mouseover: It is triggred when mouse is moved over element.
mouseup: It is triggred when mouse button if released while it is on element.

Example 1: In this example we will see different UI event such as onload, keydown, blur, dobleclick and auxclick and print them when they triggered.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <center>
        <h2 style="color: green">Geeksforgeeks</h2>
        <input type="text" id="ele">
        <br />
        <button id="button" onclick="document
        .getElementById('ele').value=''">clear</button>
        <h2 id="pr"></h2>
    </center>
    <script>
        const doc = document.getElementById('ele');
        window.onload = (event) => {
            print("page is fully loaded");
        };
        doc.addEventListener('keydown', (event) =>
            print('Entered Character is : ' + event.code));
        doc.addEventListener('blur', (event) =>
            print('Input is blured'));
 
        const button = document.getElementById('button');
        button.addEventListener('dblclick', (event) =>
            print('Clear button is doubled clicked'))
        button.addEventListener('auxclick', (event) =>
            print('Clear button is doubled11 clicked'))
        function print(temp) {
            document.getElementById('pr').innerHTML = temp;
        }
    </script>
</body>
 
</html>

Output:

event

Example 2: In this example we will see UI event such as click, mouserover, mouseout event and print them in DOM

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <center>
        <h2 id="ele" style="color: green;">
              Geeksforgeeks
          </h2>
        <button id="button">click</button>
        <h2 id="pr"></h2>
    </center>
    <script>
        const ele = document.querySelector("#ele");
        const button = document.querySelector('button')
        button.addEventListener('click', (event) =>
            print('Button Clicked'));
        button.addEventListener('mouseover', (event) =>
            print('Mouse On button'));
 
        ele.addEventListener('mouseover', (event) =>
            print('Mouse is over GeekforGeeks'))
 
        ele.addEventListener("mouseout", (event) => {
            print("Mouse is out from Geeksforgeeks")
        });
 
 
        function print(ele) {
            document.getElementById('pr').innerHTML = ele;
        }    
    </script>
</body>
 
</html>