Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain focus events in JavaScript
The focus of items on a web page can be determined via focus events, which we will learn about in this article.
The numerous browser−provided events that are triggered when an HTML element gains or loses attention are known as focus events in JavaScript. These occasions can be utilised in a number of contexts, for as in response to user actions like clicking on an input field. We can track when a web page element obtains or loses focus with the aid of focus events.
There are three main focus events in JavaScript −
Focus − This event gets triggered when an element gains focus, like an element is clicked or gets tabbed into.
Blur − This event is the opposite of the focus event. It gets triggered when an element loses focus, like getting clicked outside the element or tabbed away from it.
Focusin − This event is similar to the Focus event, but it can also bubble up the DOM tree.
Focusout − This event is similar to the blue event, but it can also bubble up the DOM tree.
Let’s understand the above concept with the help of some examples.
Example 1
Using the addEventListener document method, we will construct an input field with the id "name" and add several event listeners for the focus and blur events to it. The focus event listener logs a message to the console when the input field becomes focused, and the blur event listener logs a message to the console when it loses focus.
Filename: index.html
<!DOCTYPE html>
<html>
<head>
<title>Explain focus events in JavaScript.</title>
</head>
<body>
<label for="name">Name:</label>
<input type="text" id="name" />
<script>
const nameInput = document.getElementById('name');
nameInput.addEventListener('focus', function() {
console.log('Input field has gained focus.');
});
nameInput.addEventListener('blur', function() {
console.log('Input field has lost focus.');
});
</script>
</body>
</html>
Output
The output will look like below −
Example 2
In the above example, we will create an input field with the id "name" and add different event listeners for the focusin and focusout events to it using the addEventListener document method. When the input field gets focused, the focusin event listener logs a message to the console, and when it loses focus, the focusout event listener logs a message to the console.
Filename: index.html
<!DOCTYPE html>
<html>
<head>
<title>Explain focus events in JavaScript.</title>
</head>
<body>
<label for="name">Name:</label>
<input type="text" id="name" />
<script>
const nameInput = document.getElementById('name');
nameInput.addEventListener('focusin', function() {
console.log('focusin event fired.');
});
nameInput.addEventListener('focusout', function() {
console.log('focusout event fired.');
});
</script>
</body>
</html>
Output
The output will look like below −
Conclusion
JavaScript's focus events are a fantastic feature that let us know when an element has acquired or lost focus. We can develop a wide range of functions, such as responding to user interactions, validating user input, initiating actions based on user behaviour, or offering visual feedback, by exploiting the many focus events that are present in the page. We learned the concept of focus events in JavaScript and saw some examples explaining the same.
600 Views
