Java script aula 07 - eventos

Eventos - JavaScript Cristiano 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 ﬁca 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 ﬂexibilidade. • 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).

Deﬁnindo 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 deﬁnir 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 ﬂexibilidade ao código, pois deixa o código HTML independente do Javascript. Todas as modiﬁcaçõ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. • 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 ﬁltro é 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.

• onFocus  Este evento onFocus, é exatamente o contrário de onBlur. Acontece quando um elemento da página recebe o focu 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. 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>

Java script aula 07 - eventos

Mais conteúdo relacionado

Mais procurados

Semelhante a Java script aula 07 - eventos

Mais de Cristiano Pires Martins

Último

Java script aula 07 - eventos