11 java script - exemplos com eventos
TRANSCRIPT
Páginas Web com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
Java Script - EventosConceitos e alguns exemplos
Eventos
Eventos são os disparos que chamam as funções dentro de seus scripts. Podemos citar como um exemplo de evento, o clique que o usuário dá em um botão. Este evento é chamado de onclick. Outro tipo de evento é onload, que dispara quando a página acaba de ser carregada.
onClick
<html> <head> <title>onclick</title> <script > function mensagem(){ window.alert("Você clicou no botão!"); }
</script></head>
<form> <input type="button" value="Clique Aqui" onclick="mensagem()"></form></body> </html>
onClick<html> <head> <title>onclick</title>
<script> function mensagem(){ window.alert("Você clicou no documento!"); }</script></head>
<body onclick="mensagem()"></body> </html>
onSubmit
<html> <head> <title>onsubmit</title> <script>function obrigado(){ window.alert("dados enviados com sucesso!"); }</script> </head>
<body><form name="dados" onsubmit="obrigado()">Digite o seu nome: <input type="text" name="nome"><input type="submit" value="Enviar"></form>
</body> </html>
onmouseover
<html> <head> <title> onmouseover </title>
<script >function mensagem(){ window.alert('Você passou o mouse aqui!'); }</script>
</head>
<body><a href="http://www.site.com" onmouseover="mensagem()">Passe o mouse aqui</a></body> </html>
onmouseout
<html> <head> <title> onmouseout </title> <script type="text/javascript"> function mensagem(){ window.alert('Você retirou o mouse do link!'); }</script></head>
<body><a href="http://www.site.com" onmouseout="mensagem()">Passe o mouse aqui</a></body> </html>
onfocus
<html> <head> <title> onfocus </title>
<script> function alerta(){ window.alert('Cuidado com o que vai digitar!'); }</script>
</head>
<body><form> Digite um palavrão aqui: <input type="text" onfocus="alerta()"></form></body>
</html>
onchange
<html> <head> <title> onchange </title>
<script> var alterado = false; function avisar(){ alterado = true; } function verificar(){ if(alterado == true){ window.alert('O texto da caixa de texto foi alterado!'); } else { window.alert('O texto da caixa de texto NÃO foi alterado!'); } }</script></head> <body><form> Digite o seu e-mail: <input type="text" value="Marlene" onchange="avisar()"> <input type="button" value="Enviar" onclick="verificar()"> </form></body> </html>
onchange
<html> <head> <title> onchange </title> <script> function avisar(){ if(document.cadastro.email.value == ''){ window.alert('Este campo não pode ficar vazio.'); document.cadastro.email.focus(); } else{ window.alert('Os dados estão OK.'); } }</script></head>
<body><form name="cadastro"> Digite o seu e-mail: <input type="text" name="email" onchange="avisar()"> <input type="text" name="email1" > <input type="button" value="Enviar"> </form></body> </html>
onunload
<html> <head> <title> onunload </title>
<script> function mensagem(){ window.alert('Obrigado por visitar o meu site!'); }</script></head>
<body onunload="mensagem()"> teste123</body>
</html>
onload<html> <head> <title> onload - abrindo janela</title> <script type="text/javascript">function abrir(){ window.open("http://uol.com.br", "janela", "height=300, width=400,scrollbars=yes");}</script></head> <body onload="abrir()"></body> </html>
onclick
<html> <head> <title> onclick </title> <script> function exibir(){ var nome = document.form1.text1.value; window.alert("Bem-vindo ao meu site, " + nome); }</script></head> <body><form name="form1"> Digite o seu nome e clique o botão<br> <input type="text" name="text1"> <input type="button" value="Clique" onclick="exibir()"></form></body> </html>
onclick
<html> <head> <title> onclick </title>
<script>function fechar(){ if(window.confirm("Deseja mesmo fechar a página?")){
window.alert('a página sera fechada'); window.close(); } }</script></head>
<body><form name="form1"> <input type="button" value="Fechar esta janela" onclick="fechar()"></form></body> </html>
onclick
<html> <head> <title> onclick </title>
<script> function enviar(){ var nome = document.form1.text1.value; window.alert("Você digitou: " + nome); } </script></head>
<body><form name="form1">Digite o seu nome e clique o botão<br> <input type="text" name="text1"><input type="button" value="Enviar" onclick="enviar()"> <form></body> </html>
onclick
<html> <head> <title> onclick </title>
<script> function alterar(){ document.form1.btn1.value = "Você me clicou!!!!"; } </script></head>
<body><form name="form1"> <input type="button" name="btn1" value="Clique Aqui" onclick="alterar()"></form></body>
</html>