CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

JavaScript/jQuery - Manipuladores de eventos

Por Benedito Silva Júnior - publicado em 19/07/2016


Manipuladores de eventos Javascript servem para interfacear um script com atividades do sistema ou ações do usuário. Eles são divididos em 2 categorias: eventos de sistema e eventos de mouse.

Os eventos de sistema disponíveis são: OnLoad e OnUnload. Eles não exigem a interação do usuário para serem ativados.

Os eventos de mouse disponíveis são: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver. Eles exigem a interação do usuário (através do mouse ou não) para serem ativados.

Exemplos de eventos de sistema:

Evento OnLoad

Este evento é ativado após a página HTML ser completamente carregada. Ele pode ser associado às tags <BODY> ou <FRAMESET>:

<html> <head> <script language="Javascript"> function chegada() { window.alert("Seja bem-vindo ao nosso site!"); } </script> </head> <body OnLoad="chegada()"> Veja que interessante a utilização do evento <I>OnLoad</I>. </body> </html>

Evento OnUnload

Este evento é ativado após a página HTML ser abandonada (seja através do clique sobre algum link, ou sobre os botões de avanço/retrocesso do browser). Ele pode ser associado às tags<BODY> ou <FRAMESET>:

<html> <head> <script language="Javascript"> function saida() { window.alert("Volte sempre!"); } </script> </head> <body OnUnload="saida()"> Veja que interessante a utilização do evento <I>OnUnLoad</I>. </body> </html>

Exemplos de eventos de mouse:

Evento OnClick

O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é ativado sempre que se dá um clique sobre um objeto que aceita evento de clique de mouse. Objetos que aceitam um evento OnClick são links, caixas de verificação e botões.

<html> <head> <script language="Javascript"> function mensagem() { window.alert("Você clicou neste campo!"); } </script> </head> <body> <a href="exemplo.html" OnClick="mensagem()"> <i>Link</i> comum</a><br> <form> <input type="radio" OnClick="mensagem()"><i>Radio</i> <br> <input type="checkbox" OnClick="mensagem()"><i>Checkbox</i> <br> <input type="reset" OnClick="mensagem()"> <br> <input type="submit" OnClick="mensagem()"> <br> </form> </body> </html>

Evento OnFocus

O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usuário clicar ou alternar para um objeto específico na página. Este evento pode ser associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).

<html> <head> <script language="Javascript"> function foco() { window.alert("O campo E-mail está em foco!"); } </script> </head> <body> <form> Nome: <input name="nome" type="text"><br> Email: <input name="email" type="text" OnFocus="foco()"><br> Telefone: <input name="telefone" type="text"> </form></body> </html>

Muitas vezes, os dados que são inseridos em um formulário precisam ser separados, analisados, manipulados ou verificados quanto a erros antes de serem transmitidos para o servidor.

O evento OnSubmit permite a captura e, se necessário, a interrupção do envio dos dados de um formulário. Isto é realizado chamando-se a função a partir do manipulador OnSubmit, fazendo com que ela retorne verdadeiro ou falso. Se a função associada ao manipulador retornar falso, os dados do formulário não serão enviados. Esta funcionalidade pode ser verificada a partir do código a seguir.

<html> <head> <script language="Javascript"> function submete() { if (document.form1.campo1.value == "" || document.form1.campo2.value == "") { return false; } else { return true; } } </script> </head> <body bgcolor=white link=blue vlink=blue alink=blue> <form name=form action="exemplo.html" OnSubmit="return submete()"> Campo 1: <input type="text" size=10 name=campo1> <br> Campo 2: <input type="text" size=10 name=campo2> <p> <input type=submit> </form> </body> </html>


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo