Interactive Guide To UI Events API

Web APIs are essential to building a functioning site. The browser provides them so the developers can access the DOM, console, local storage, fire UI events, and more. All these web APIs play a significant role, but the UI Events API makes your web application interactive.

UI Events API

There are all types of user interaction; for instance, the user can click on something, hover on anything, select something, double click on something, etc. The UI Events API provides a way to handle these events and user interactions on a website. The JavaScript that runs on the browser is event-driven, which in simplest terms, is it listens for the events triggered by the user interaction and executes them.

There are two types of UI events. The first is the events triggered via user interaction, and the second is the event interface that is passed down to the handlers of these events.

Let’s look at some of the UI Events API events.

Focus And Blur Event

The focus event is triggered when the user provides focus to an element. The element can be an input field.

js
Copy
const input = document.getElementById('username');
input.addEventListener('focus', () => {
	console.log('Focus gained.');
});

On the contrary, the blur event is triggered when an element loses focus.

js
Copy
const input = document.getElementById('username');
input.addEventListener('blur', () => {
	console.log('Focus loosed.');
});

Here is a quick demo of the event in action:

Context Menu Event

You can use this event to listen when the user right-clicks. You can also disable the context menu using it.

js
Copy
const divPara = document.getElementById('para-div');
divPara.addEventListener('contextmenu', e => {
	e.preventDefault();
});

Here is a quick demo of the event in action:

Click Event

This is the most common type of events in UI Event API. It lets you execute a function when a particular element is clicked (mostly buttons).

js
Copy
let number = 0;
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', e => {
	e.preventDefault();
	number++;
	console.log('You have clicked: ', number);
});

Here is a quick demo of the event in action:

Select Event

This event executes when you select an element, for instance, the text.

js
Copy
const input = document.getElementById('username');
input.addEventListener('select', () => {
	console.log('Gotcha! You have selected the text.');
});

Here is a quick demo of the event in action:

Mouse Move Event

When the mouse cursor is moved over an element, this event fires.

js
Copy
const div = document.getElementById('ui-div');
div.addEventListener('mousemove', () => {
	console.log('Cursor has moved over this area.');
});

Here is a quick demo of the event in action:

Hover over this area

These are some of the many events available to you using this API.

Support

The API is widely supported in all versions of all major internet web browsers. So you do not need to worry about backward compatibility.