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>
<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>
</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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Java script aula 07 - eventos

Semelhante a Java script aula 07 - eventos (20)

Mais de Cristiano Pires Martins

Mais de Cristiano Pires Martins (20)

Java script aula 07 - eventos