Explain focus events in JavaScript.

JavascriptWeb DevelopmentObject Oriented Programming

The focus event is fired when an element either gets or loses focus. Following are the focus events −

EventDescription
BlurThis event is fired when an element loses focus.
FocusThis event is fired when the element gets the focus.
focusinThis event is fired when the element is about to get focus.
ocusoutThis event is fired when an element is about to lose focus.

Following is the code for focus events in JavaScript −

Example

 Live Demo

<!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 −

raja
Published on 16-Jul-2020 16:51:10
Advertisements