Eventos no JavaScript permitem executar ações em resposta a eventos do usuário ou da página. Alguns eventos comuns incluem click, change, load e mouseover. Esses eventos podem acionar funções usando propriedades como "onclick" ou o método "addEventListener".
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. 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. 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. 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();">
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. 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.
8. 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).
9. 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
10. 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>
11. 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.
12. 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
13. 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.
14.
15. 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.
16. • 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
17. 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>
18. 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>
19. 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>
20. 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>