Java script aula 07 - eventos

794 visualizações

Publicada em

Java script aula 07 - eventos

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
794
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
83
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Java script aula 07 - eventos

  1. 1. Eventos - JavaScript Cristiano Pires Martins Fontes: http://www.linhadecodigo.com.br http://www.devmedia.com.br http://ricvelozo.blogspot.com.br
  2. 2. 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.
  3. 3. 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
  4. 4. 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.
  5. 5. Tratando eventos diretamente nas propriedades • A linguagem Javascript permite que o código a ser executado em um evento seja informado diretamente na propriedade que lhe dá acesso. • Essa forma é utilizada quando se tem poucas instruções a serem executadas e quando as expressões são curtas e de fácil compreensão. • Na listagem a seguir adicionamos um código à propriedade onclick de um botão para que seja exibida uma mensagem quando o usuário clicar sobre ele.
  6. 6. 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.
  7. 7. 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();">
  8. 8. 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.
  9. 9. exemplo 1 <!doctype html> <html> <head>     <meta charset="UTF-8"/> </head> <body>     <button id="btn" onclick="alert('Seja bem vindo(a) ao Linha de Código.')">Clique aqui</button> </body> </html>
  10. 10. 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).
  11. 11. 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 1) • No Exemplo 2 criamos uma função chamada “exibirMensagem” que apresenta uma caixa de diálogo (alert) com a data atual. Nessa função foram usadas apenas duas linhas de código, mas fica claro que caso fosse preciso, várias outras instruções poderiam ser executadas.
  12. 12. 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>
  13. 13. 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.
  14. 14. 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>
  15. 15. 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.
  16. 16. 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. • onChange
 Já 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. • onClick
 Ao clicar o botão do mouse sobre um elemento da página, geralmente um botão ou um link. • onDragDrop
 Refere-se a ação de arrastar e soltar algo sobre uma página web.
  17. 17. • onFocus
 Este evento onFocus, é exatamente o contrário de onBlur. Acontece quando um elemento da página recebe o foco da aplicação. • onLoad
 Representa que a página ou as imagens acabaram de ser carregadas. • onMouseOver
 Quando o mouse passa sobre um elemento da página. • onSubmit
 Quando um formulário é submetito, precisamente antes do envio.
  18. 18. 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>
  19. 19. Eventos submit e keyup <form> <input type="text" name="a" onFocus=""/> <input type="submit" /> </form> <script type=“text/javascript" src=“nome.js"> </script> var f = document.forms[0]; document.forms[0].elements[0].focus(); f.addEventListener("submit", function() { alert(f.a.value);return false; }); f.a.addEventListener("keyup", function() { f.a.value=f.a.value.toUpperCase(); }); HTML Javascript
  20. 20. 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>
  21. 21. 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>
  22. 22. onmousedown, onmouseup<!DOCTYPE html> <html> <head> <title>Usando 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>

×