Primeiramente, deixe-me explicar o que são estes eventos, antes de mostrar um exemplo de utilização.
onBlur: o evento onBlur ocorre quando um objeto perde o foco. ex: você tem 2 campos de textos para digitar seus dados. O primeiro você deve digitar seu nome e no outro o seu email. Após digitar o seu nome você terá que digitar o email, certo? Se você tivesse colocado um evento onBlur no campo onde digitou o nome, ao clicar no campo de email uma ação seria disparada. Entendeu!
onFocus: este evento ocorre quando o objeto recebe o foco. ex: quando você clica em um campo para digitar algo.
Vamos ao código:
Explicando:
1º. Ao carregar a página, este campo receberá o texto “digite aqui”. O atributo value é utilizado quando queremos definir um valor inicial para o campo.
2º. Os eventos onBlur e onFocus estão recebendo instruções de condição (if). O “if” é o “se” da nossa língua – ex: se valor for igual a 0 (zero) então faça isto. No nosso código, eu quero dizer o seguinte: quando o objeto perder o foco é disparado o evento onBlur e este evento vai checar se o atributo “value” ESTÁ EM BRANCO. Se estiver, o atributo “value” RECEBE O TEXTO. No evento onFocus é feito um check se o atributo value possui o texto “digite aqui”. Se possuir, o atributo “value” FICA EM BRANCO.
Observação: o texto inicial informado no atributo “value” e o texto digitado dentro do if do onFocus tem que ser idênticos. O JavaScript é caseSensitive, quero dizer, faz diferença de maiúscula e minúscula.
3º. Finalizando, para que serve o this?
O “this” serve para fazer referência ao próprio objeto.
Resultado: