Conhecendo JavaScript - Eventos
EventosOs eventos são ações realizadas pelo usuário que são capturadas dentro do navegador, no JavaScript podemos captura-las como por exemplo o comportamento do movimento do mouse, um clique de uma tecla do teclado, até mesmo quando o usuário redimensiona a tela do browser, o carregamento da página, esses eventos possibilitam disparar ações.
Os eventos trabalham em conjunto com as funções vista no ultimo estudo, caso não tenha se lembre volte no post e leia novamente.
Eventos
Eventos do Mouse
Os principais eventos de captura do mouse no browser são:
ONCLICK - Acionado no clique do mouse.
ONDBLCLICK - Acionado no clique duplo do mouse
ONMOUSEDOWN - Acionado no clique do mouse(soltando ou não o botão)
ONMOUSEOVER - Acionado quando cursor do mouse sobrepõe o elemento da página.
ONMOUSEOUT - Acionado quando o cursor do mouse sai da área de uma elemento da página.
Para podermos começar precisamos de um elemento na página, para podemos visualizar e testar
Criaremos uma div em uma pagina html.
<div style="background: yellow; height:50px ; width:50px;"></div>
Dentro desse elemento vamos adicionar onclick,
<div onclick style="background: yellow; height:50px ; width:50px;"></div>
Que nesse caso ele que vai fazer algo se for clicado, nesse caso vamos adicionar um document.write("Evento de clique")
<div onclick="document.write("Evento de clique");" style="background: yellow; height:50px ; width:50px;"></div>
Ao ser clicado o elemento some e mostra a frase Evento de clique.
Antes Depois do clique
Antes Depois do clique
Vamos fazer o uso de uma simples função no JavaScript como já vimos em outro post, e vamos utilizar dentro do onclick.
<script type="text/javascript">
function teste (){
document.write("Estamos dentro da função");
}
</javascript>
</head>
<body>
<div onclick="teste()" style="background: yellow; height:50px ; width:50px">
</body>
Simples assim o evento chama a função, podemos agora usar o double click o dblclick,
<div ondblclick="teste()" style="background: yellow; height:50px ; width:50px">
Resultado como esperado ao clicar 2x ele retira o elemento e exibe a frase, agora vamos onmousedown
<div onmousedown="teste()" style="background: yellow; height:50px ; width:50px">
Esse evento acontece ao pressionar o botão do mouse , mesmo se ficar segurando ele já executa antes. Agora vamos utilizar o onmouseover .
<div onmouseover="teste()" style="background: yellow; height:50px ; width:50px">
O evento agora ele acontece quando o mouse entra dentro do raio do elemento, já o onmouseout é o contrario ele executa quando sai do elemento.
<div onmouseout="teste()" style="background: yellow; height:50px ; width:50px">
Podemos usar dentro de todos elementos da página, por exemplo utilizar uma simples tag <h2 onclick="teste()" >"Teste"</h2>, é simples e fácil de compreender sua utilização.
Resultado
Resultado
Eventos de Teclado
Os eventos de teclado igual aos do mouse também são possíveis de serem capturados.
Vamos ver agora as funções onkeydown, onkeypress e onkeyup.
onkeydown - é acionado quando uma tecla é pressionada (tanto faz solta ou apertada).
onkeypress - é acionado quando uma tecla é pressionada (solta ou apertada) a diferença que ele não captura todas as teclas Exemplo ( alt / ctrl / esc / shift / combinações - ctrl+v) .
onkeyup - é acionada somente no momento que a tecla é solta/ liberada (todas as teclas).
Agora vamos criar nosso exemplo, primeiro precisamos escrever e receber de alguma forma o que vai ser digitado, usaremos o input para entrada pelo teclado será utilizado.
<input onkeydown="" type="text"/>
Vamos adicionar um texto para ser apresentado no browser
<input onkeydown="document.write('Voce pressionou uma tecla')" type="text"/>
O resultado como esperado ao digitar uma tecla ele apresenta o texto no browser
Sem muito mistério para fazer as capturas de teclado.
Eventos de Janela
Eventos de Janela
Os eventos de janela, são eventos de captura relacionados a página ou também aos frames dentro da página.
Temos dois eventos de captura, onload e onresize.
ONLOAD - é acionado quando a página finaliza o carregamento
ONRESIZE - é acionado quando a página ou frame é redimensioando.
Vamos criar um novo Script para fazer nossos testes.
Antes começarmos precisamos saber que os eventos de janela podem ser associados a página e a imagens.
O onload é executado depois que a página faz seu carregamento completo (imagens/tabelas/itens), vamos apenas criar um ambiente de teste semelhante aos que já vistos.
Lembrando dentro do body nesse exemplo.....
<body onload="document.write('O carregamento da página foi completado')">
</body>
Como não temos nada na página, é exibida a mensagem quase que instantaneamente.
O onresize captura o evento de tamanho da janela, segue exemplo
<body onresize="document.write('Foi alterado a tela ')">
</body>
Para poder ter uma melhor apresentação podemos usar o log, ele vai mostrar cada iteração.
<body onresize="console.log('Foi alterado a tela ')">
</body>
Ao realizar qualquer alteração no redimensionamento da janela será exibido uma mensagem no log, podemos usar o Log que esta no NetBeans ou no Console no Navegador Chome ( tecla - F12), imagem e resultado do teste.
Finalizo este post por aqui!, poderiamos estender o assunto porém já esta o suficiente para ter uma compreensão e seguir com o estudo.
Temos dois eventos de captura, onload e onresize.
ONLOAD - é acionado quando a página finaliza o carregamento
ONRESIZE - é acionado quando a página ou frame é redimensioando.
Vamos criar um novo Script para fazer nossos testes.
Antes começarmos precisamos saber que os eventos de janela podem ser associados a página e a imagens.
O onload é executado depois que a página faz seu carregamento completo (imagens/tabelas/itens), vamos apenas criar um ambiente de teste semelhante aos que já vistos.
Lembrando dentro do body nesse exemplo.....
<body onload="document.write('O carregamento da página foi completado')">
</body>
Como não temos nada na página, é exibida a mensagem quase que instantaneamente.
O onresize captura o evento de tamanho da janela, segue exemplo
<body onresize="document.write('Foi alterado a tela ')">
</body>
Para poder ter uma melhor apresentação podemos usar o log, ele vai mostrar cada iteração.
<body onresize="console.log('Foi alterado a tela ')">
</body>
Ao realizar qualquer alteração no redimensionamento da janela será exibido uma mensagem no log, podemos usar o Log que esta no NetBeans ou no Console no Navegador Chome ( tecla - F12), imagem e resultado do teste.
Finalizo este post por aqui!, poderiamos estender o assunto porém já esta o suficiente para ter uma compreensão e seguir com o estudo.
Comentários
Postar um comentário