The DOM FocusEvent Object contains the events that are related to focus. It includes events like focus in, focus out and blur.
Properties:
- relatedTarget: It returns the element related to the element that triggered a focus or blur event. This value is by default set to null due to security reasons. It is a read-only property.
Example: Finding out related event with the relatedTarget property.
html
<!DOCTYPE html><html>
<head>
<title>DOM FocusEvent</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>DOM FocusEvent</b>
<p>
The relatedTarget property will
return the element that will
return the secondary target.
</p>
<p>Textarea with id of "text1"</p>
<textarea id="text1"
onfocus="getRelatedTarget()">
</textarea>
<p>Textarea with id of "text2"</p>
<textarea id="text2"></textarea>
<script>
function getRelatedTarget() {
console.log(this.event.relatedTarget);
}
</script>
</body>
</html>
|
Output:
- Focusing on the second textarea:
- Refocusing the first textarea:
Event Types:
- onblur: This event fires whenever an element loses its focus.
- onfocus: This event fires whenever an element gets focus.
- onfocusin: This event fires whenever an event is about to get focus.
- onfocusout: This event fires whenever an event is about to lose focus.
Example: This example implements the onfocusin event.
html
<!DOCTYPE html><html>
<head>
<title>DOM FocusEvent</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>DOM FocusEvent</b>
<p>
The onfocusin event fires whenever an
element is about to receive focus.
</p>
<textarea id="text1" onfocusin="fireEvent()">
</textarea>
<script>
function fireEvent() {
console.log("The textarea was focused.");
}
</script>
</body>
</html>
|
Output:
- Before clicking on the textarea:
- After clicking on the textarea:
Example: This example implements the onfocusout event.
html
<!DOCTYPE html><html>
<head>
<title>DOM FocusEvent</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>DOM FocusEvent</b>
<p>
The onfocusout event fires whenever an
element is about to lose focus.
</p>
<textarea id="text1" onfocusout="fireEvent()">
</textarea>
<script>
function fireEvent() {
console.log("The textarea was unfocused.");
}
</script>
</body>
</html>
|
Output:
- Before clicking out of the textarea:
- After clicking out of the textarea:
Supported Browsers: The browser supported by FocusEvent Object are listed below:
- Chrome 26
- Edge 12
- Firefox 24
- Internet Explorer 9
- Safari 7
- Opera 15