Web API UI Events Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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: 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> Output: Comment More infoAdvertise with us Next Article Web API UI Events S satyam00so Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League Web-API Geeks Premier League 2023 +1 More Similar Reads Web API Pointer Events Web API Pointer events are DOM events that are designed to create a single DOM event model to handle pointing input devices such as a pen, mouse, or touch screen. These are fired as a pointing device. It helps different devices work together smoothly, making sure your experience on websites is alway 5 min read jQuery Events jQuery events are actions or occurrences that happen on a web page, such as clicks, hover, or keypress. jQuery provides methods to handle and respond to these events with ease. jQuery events are used to create dynamic web pages. Syntax: $(selector).method(function)Here We will explore some basic eve 4 min read Event Management Web App using MERN In this guide, we'll walk through the step-by-step process of building a feature-rich Event Management Web App. We will make use of the MERN stack to build this project.Preview of final output: Let us have a look at how the final output will look like.Final Output of Event Management AppPrerequisite 9 min read Node.js Events An event in NodeJS is an action or occurrence, such as a user click, a file being read, or a message being received, that NodeJS can respond to. Events are managed using the EventEmitter class, which is part of NodeJS's built-in events module. This allows NodeJS to react to various actions asynchron 7 min read Spring - Application Events Spring is a popular Java-based framework that helps developers create enterprise applications quickly and efficiently. One of the most powerful features of the Spring framework is its Application Events feature, which allows developers to create custom event-driven applications. What are Spring Appl 5 min read Like