- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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 event is fired when an element either gets or loses focus. Following are the focus events −
Event | Description |
---|---|
Blur | This event is fired when an element loses focus. |
Focus | This event is fired when the element gets the focus. |
focusin | This event is fired when the element is about to get focus. |
ocusout | This event is fired when an element is about to lose focus. |
Following is the code for focus events in JavaScript −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } input { padding: 10px; } </style> </head> <body> <h1>Focus events in Javascript</h1> <form id="form"> <input type="text" placeholder="Username" /> <input class="passW" type="password" placeholder="Password" /> </form> <h3>Focus on the above password input box to change its background color</h3> <script> let passEle = document.querySelector(".passW"); passEle.addEventListener("focus", () => { passEle.style.backgroundColor = "#90EE90"; }); </script> </body> </html>
Output
On focusing on the password field −
- Related Articles
- Explain Key-events in JavaScript?
- Explain touch events in JavaScript
- Explain Scroll events in JavaScript.
- Explain load events in JavaScript?
- JavaScript focus
- What are events in JavaScript?
- Explain comprehensive timeline events in mergers and acquisition
- How to register events in JavaScript?
- What are custom events in JavaScript?
- What are JavaScript DOM Events?
- How to Handle JavaScript Events in HTML?
- How does JavaScript focus() method works?
- What is cross-browser window resize events in JavaScript?
- Difference between document load and DOMContentLoaded events in JavaScript
- What are common HTML Events supported by JavaScript?

Advertisements