El objeto DOM FocusEvent contiene los eventos que están relacionados con el foco. Incluye eventos como enfocar, enfocar y desenfoque.
Propiedades:
- relatedTarget : Devuelve el elemento relacionado con el elemento que activó un evento de foco o desenfoque. Este valor se establece de forma predeterminada en nulo por motivos de seguridad. Es una propiedad de sólo lectura.
Ejemplo: encontrar un evento relacionado con la propiedad relatedTarget.
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>
Producción:
- Centrándonos en la segunda área de texto:
- Reenfocando la primera área de texto:
Tipos de eventos:
- onblur : este evento se activa cada vez que un elemento pierde su foco.
- onfocus : este evento se activa cada vez que un elemento obtiene el foco.
- onfocusin : este evento se activa cada vez que un evento está a punto de ser enfocado.
- onfocusout : este evento se activa cuando un evento está a punto de perder el foco.
Ejemplo: este ejemplo implementa el evento onfocusin.
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>
Producción:
- Antes de hacer clic en el área de texto:
- Después de hacer clic en el área de texto:
Ejemplo: este ejemplo implementa el evento onfocusout.
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>
Producción:
- Antes de hacer clic fuera del área de texto:
- Después de hacer clic fuera del área de texto:
Navegadores compatibles: los navegadores compatibles con FocusEvent Object se enumeran a continuación:
- cromo 26
- Borde 12
- Firefox 24
- explorador de Internet 9
- Safari 7
- Ópera 15
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA