El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco.
Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona. Cuando el control tome foco borrar el contenido actual, al abandonar el mismo, mostrar un mensaje de alerta si el mismo está vacío. Mostrar en las propiedades value de los controles text los mensajes "nombre" y "mail" respectivamente.
<html>
<head></head>
<body>
<script type="text/javascript">
function vaciar(control)
{
control.value='';
}
function verificarEntrada(control)
{
if (control.value=='')
alert('Debe ingresar datos');
}
</script>
<form>
<input type="text" id="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)" value="nombre"><br>
<input type="text" id="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)" value="mail">
<br>
<input type="button" value="Confirmar">
</form>
</body>
</html>
A cada control de tipo TEXT le inicializamos los eventos onFocus y onBlur. También cargamos las propiedad value para mostrar un texto dentro del control. Le indicamos, para el evento onFocus la función vaciar, pasando como parámetro la palabra clave this que significa la dirección del objeto que emitió el evento. En la función propiamente dicha, accedemos a la propiedad value y borramos su contenido. Esto nos permite definir una única función para vaciar los dos controles.
De forma similar, para el evento onBlur llamamos a la función verificarEntrada donde analizamos si se ha ingresado algún valor dentro del control, en caso de tener un string vacío procedemos a mostrar una ventana de alerta.