java script aula 07 - eventos
TRANSCRIPT
Eventos - JavaScriptCristiano Pires Martins
Fontes: http://www.linhadecodigo.com.br http://www.devmedia.com.br http://ricvelozo.blogspot.com.br
Eventos
• Eventos são procedimentos executados em consequência a uma ação.
• Exemplo: • Quando o usuário clica em um botão, é disparado um evento
deste elemento chamado “click”. • Quando se pressiona uma tecla sobre outro elemento, é
disparado um evento chamado “keydown” e quando a tecla é solta, o evento “keyup” é disparado.
Exemplo de eventos• Um clique no mouse
• O carregamento de uma página ou imagem web
• Quando o mouse passa sobre um anúncio em uma página web
• Selecionar um campo de entrada em um formulário HTML
• Submeter um formulário HTML
• Pressionar uma tecla
Propriedade de Eventos
• Na linguagem HTML, os objetos possuem propriedades que dão acessos aos seus eventos.
• Essas propriedades têm o nome iniciando com “on”, seguido do nome do evento.
• Por exemplo, a propriedade “onclick” dá acesso ao evento click de um elemento.
Como chamar um script usando eventos
• Uma boa forma de lidar com eventos é usar event listeners.
• Crie uma função mestra, que chame todas as funções que deseja executar automaticamente, e a chame através do evento onload do elemento <body>.
function funcaoMestra() { função1(); função2(); /* ... */ }
<body onload="funcaoMestra();">
Boas práticas
• Uma boa prática em programação é separar o código por propósito.
• As páginas web podem ser separadas em três partes: estrutura (HTML), apresentação (CSS) e funcionalidade (JavaScript).
• Em JavaScript, usa-se event listeners.
O que é event listener?• Um event listener é uma função associada a um evento de um
elemento HTML.
• Dentro dessa função, o comando this serve como uma referência ao elemento que acionou o event listener.
• É comum o uso de atributos relacionados a eventos, como onclick e onfocus, mas deste modo, não há separação e a função fica comprimida em uma linha, o que não é bom para scripts grandes.
• Também é possível chamar uma função através desses atributos, mas desta forma se perde um pouco da flexibilidade.
• A forma ideal é adicioná-los usando a função addEventListener(), ou o atributo relacionado ao evento, dentro do JavaScript.
event handlers
• O tratamento de eventos geralmente é feito a partir de funções nas quais se implementa o código que deve ser executado quando o evento ocorrer.
• Essas funções são chamadas de “event handlers” (tratadores de evento).
Definindo event handlers
• Os event handlers são funções que contém o código a ser executado na ocorrência de um evento.
• Em Javascript, podemos criar uma função utilizando a sintaxe padrão e fazer a chamada a essa função na propriedade de evento, informando seu nome e possíveis parâmetros no lugar onde se colocaria o código diretamente
exemplo 2<!doctype html> <html> <head> <meta charset="UTF-8"/> <script type="text/javascript"> function exibirMensagem() { var data = new Date(); alert(data.toString()); } </script> </head> <body> <button id="btn" onclick="exibirMensagem();">Clique aqui</button> </body> </html>
Tratando eventos com a função addEventListener
• A função “addEventListener”, nativa da linguagem Javascript, permite ligar um evento de um objeto a uma função que fará seu tratamento.
• Usando essa função, não é preciso definir a propriedade de evento do objeto diretamente, pois isso será feito via código, dinamicamente.
• No exemplo a seguir, temos a mesma função exibir mensagem, mas dessa vez a ligamos ao evento click do botão usando a addEventListener.
exemplo 3<!doctype html> <html> <head> <meta charset="UTF-8"/> </head> <body> <button id="btn">Clique aqui</button> <script type="text/javascript"> function exibirMensagem() { var data = new Date(); alert(data.toString()); } var btn = document.getElementById("btn"); btn.addEventListener("click", exibirMensagem); </script> </body> </html> Coloque o script em um arquivo.js
função addEventListener• Nesse caso foi preciso usar a função “getElementById”
para selecionar o objeto cujo evento seria tratado, no caso, o botão.
• O primeiro parâmetro da addEventListener é o nome do evento que será tratado, nesse caso, “click”. O segundo é o nome da função que será executada.
• Essa forma dá mais flexibilidade ao código, pois deixa o código HTML independente do Javascript. Todas as modificações necessárias são feitas no script, sem precisar alterar a tag.
Eventos• onBlur
Este evento representa a perda de foco de um componente, por exemplo, o usuário está digitando o CEP em um formulário e tecla TAB ou clica em outro campo do formulário, pode-se neste momento disparar uma função que valida o CEP.
• onChangeJá este representa a mudança do valor de um componente. Por exemplo, o usuário seleciona numa lista o mês desejado para uma consulta, uma ação de filtro é disparada sobre uma tabela, que passa a listar os dados somente do mês selecionado.
• onClickAo clicar o botão do mouse sobre um elemento da página, geralmente um botão ou um link.
• onDragDropRefere-se a ação de arrastar e soltar algo sobre uma página web.
• onFocusEste evento onFocus, é exatamente o contrário de onBlur. Acontece quando um elemento da página recebe o focu da aplicação.
• onLoadRepresenta que a página ou as imagens acabaram de ser carregadas.
• onMouseOverQuando o mouse passa sobre um elemento da página.
• onSubmitQuando um formulário é submetito, precisamente antes do envio.
Eventos
Evento onload<!DOCTYPE html> <html> <head> <title>Usando eventos no Javascript</title> </head> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies são permitidos") } else { alert("Cookies não são permitidos") } } </script> <p>Irá aparecer um alert dizendo se os cookies estão ou não liberados em seu navegador</p> </body> </html>
Evento onChange<!DOCTYPE html> <html> <head> <title>Usando eventos no Javascript</title> <script>
function myFunction() {
var x=document.getElementById("fname"); x.value=x.value.toUpperCase();
} </script> </head> <body>
Insira seu Nome: <input type="text" id="fname" onchange="myFunction()"> <p> Ao clicarmos fora do input text o texto escrito nele
ficará todo em caixa alta.</p> </body> </html>
OnMouseOver e OnMouseOut
<!DOCTYPE html> <html> <head> <title>Usando eventos no Javascript</title> </head> <body> <div onmouseover="mOver(this)" onmouseout=“mOut(this)" style=“ background-color:#D94A38; width:120px; height:20px; padding:40px;">Passe o mouse em mim</div> <script> function mOver(obj) { obj.innerHTML=“Obrigado"; } function mOut(obj) { obj.innerHTML="Passe o mouse em mim”; } </script> </body> </html>
onmousedown, onmouseup e onclick
<!DOCTYPE html><html><head><title>Eventos no Javascript</title></head><body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style=“background-color:#D94A38;
width:90px;height:20px;padding: 40px;">Clique aqui</div>
<script>function mDown(obj){
obj.style.backgroundColor=“#1EC5E5";obj.innerHTML="Solte o clique”;
}function mUp(obj){
obj.style.backgroundColor="#D94A38"obj.innerHTML="Obrigado"
}</script></body></html>