Definição: Eventos são interações com o documento Web. Toda vez que se utiliza uma página web alguns eventos são disparados. Ou seja, evento é qualquer ocorrência interativa que ocorre com o html.
Manipuladores de eventos são as funções a serem executadas, quando um evento acontecer. Ao clicar em um botão
ele deverá disparar uma função. Essa função a ser executada é o manipulador de eventos. O disparador de eventos é o próprio
elemento html. No exemplo abaixo o link do botão é o disparador de eventos. Pode-se associar a esse link um evento. Nesse caso
tem o evento de click, o evento mousehover e pode ser também associada uma função que será executada.
Resumindo:
Evento: click
Manipulador de eventos: função javaScript associada
Elemento: disparador de eventos.
Alguns disparadores de eventos tem o seu manipulador de eventos padrão. Exemplo: um link quando clicado, já tem seu manipulador de eventos padrão no browser. Ou seja o browser já leva o internauta até o endereço especificado no atributo href do link.
É possível substituir o manipulador de eventos do browser por outro escolhido pelo programador. É possível também cancelar a ação do manipulador padrão de eventos, colocando a declaração return false, no final da função, do manipulador que está sendo inserido no lugar.
No Html:Para mais infornações procurar em W3schools - Eventos
Na folha de estilo:
#botao{
/*border: 1px dotted black;*/
width: 12%;/*largura do botão em porcentagem*/
float: left;
margin-top: 20px;/*Afasta do topo do box p*/
margin-right: 20px;/*Afasta os elementos à direita do botão*/
margin-left: 20px;/*Afasta da margem esquerda do container*/
padding: 5px; /*espaço ao redor da palavra*/
/*background-color: #F5F5DC;*/
font-size:20px;
text-align:center;
text-decoration:none;/*retira o sublinhado do link*/
border-radius: 8px; /*deixa a borda da caixa (div) arredondada*/
-moz-border-radius:8px; /*deixa as bordas arredondadas*/
-webkit-border-radius:8px;/*para que funcione em outros navegadores*/
box-shadow: 1px 2px 1px 2px #686868;/*o primeiro número é da sombra direita, o 2º é da parte debaixo*/
}
a:hover {
background-color: red;
/*background-image: url(img/button.jpg );para colocar uma imagem*/
color:#FFFFFF; /*cor da fonte*/
}
Outra forma:
No Html:
<a id="botao" href="#" onclick= "um();">Botão </a>
No javaScript:
function um() {
alert('Obrigado meu Deus');
}
clique
Resultado: Obrigado meu Deus
HTML DOM permite que o JavaScript possa reagir a eventos do HTML.
Manipuladores de eventos que usam a API DOM, mais antiga.
No Html:
<a id="botao1" href="#">clique</a>
No javaScript:
window.onload = function () {
var btn = document.getElementById("botao1");
btn.onclick = function() {
/*btn.onclick = null; para desativar o manipulador de eventos*/
um();
}
}
Esse exemplo é chamado de Manipulador de eventos, DOM nivel zero.
Todos os navegadores ainda suportam as implementações de manipuladores de eventos via Hml e Dom nível 0. No entanto é conveniente usar os manipuladores de eventos DOM nível 2, por causa dos benefícios trazidos. Ele é todo baseado em especificações e o modelo mais novo não é tão dependente de propriedades específicas de manipuladores de eventos como o html e o Dom nível 0. Pode-se passar o evento direto na função como parâmetro. Pode-se ainda registrar várias funções de manipuladores de eventos em um único elemento html. Com os manipuladores de Html e DOM nível zero, não é possível criar novos eventos.
No javaScript:Através do comando return false pode-se neutralizar a ação do manipulador padrão. Mas é necessário
que o comando seja colocado direto no manipulador de eventos, será ele que dará o retorno.
No Html:
<a id="botao2" href="#" onclick="alert('Obrigado meu Deus');">clique</a>
No javaScript:
window.onload = function () {
var btn = document.getElementById("botao1");
btn.onclick = function(){return false;}/*não deixa acessar o manipulador padrão de eventos*/
}
function um() {
alert('Filipe');
}
Toda vez que é disparado um evento, existe a possibilidade de acessar o objeto event.
Esse acesso acontece de maneiras diferentes, dependendo do browser. Esse desse objeto
contém propriedades que fornecem informações sobre o evento que está acontecendo como a localização
de um click do mouse na página, qual evento foi disparado, quem disparou esse evento, se um elemento
foi arrastado para outro elemento, qual deles foi arrastado, e em cima de qual elemento foi solto.
Todas essas informações estão disponíveis dentro do objeto Event. A maioria de seus atributos são iguais
em quase todos os browsers. Apenas uma ou outra propriedade é diferente. A forma de acesso no objeto event
no I.E é diferente de como é acessado nos diferentes browsers.
No Html:
I.E
No javaScript:
window.onload = function () {
var btn = document.getElementById("botao3");
btn.onclick = function(){
alert(window.event.type);
}
No javaScript:
window.onload = function () {
var btn = document.getElementById("botao4");
btn.onclick = function(evt){
var oEvento = evt ? evt : window.event;
alert(oEvento.type);
}
No javaScript:
window.onload = function () {
var btn = document.getElementById("botao4");
btn.onclick = function(evt){
var oEvento = evt ? evt : window.event;
alert("X"+oEvento.screenX + " Y=" +oEvento.screenY);
} }
posição do mouse
Ao clicar em uma página o click não é somente em um documento. Ele também acontece em um link, uma div, uma lista.
Gerenciar esses eventos que acontece em cima de uma pilha de elementos Html é o que se chama propagação de eventos.
Na propagação de eventos o elemento mais interno que recebe o click, começa a disparar o evento, e segue disparando
o próximo evento da pilha e assim, sucessivamente até o elemento mais externo.
No Html:
<div id="div1">
<a id="botao6" href="#"onclick="alert();">propagação</a>
</div > <div id="div1">
No javaScript:
window.onload = function () {
var btn = document.getElementById("b6");
var div = document.getElementById("div1");
btn.onclick = function(){alert("b6");}
div.onclick = function(){alert("div");}
document.onclick = fuction(){alert("document");}
}
A palavra chave this representa o proprietário da função ou método que está sendo processado.
Nesse caso o proprietário da função é o objeto botão. Em uma função global this representa a
janela do documento. Para um método de objeto this representa a instância do objeto. E em manipulador
de eventos this representa o elemento que recebeu o evento. Essa palavra pode ser usada para acessar
atributos e valores sem precisar de acessar o elemento novamente via document.getElementById.
No javaScript:
window.onload = function () {
var btn = document.getElementById("b6");
var div = document.getElementById("div1");
btn.onclick = function(e){
alert(this.id);
}
}
No Html:
<input type="text" id="texto" />
No javaScript:
window.onload = function () {
var btn = document.getElementById("b6");
var div = document.getElementById("div1");
btn.onclick = function(e){
alert(this.id);
}
document.getElementById("texto").onblur = function(e){
alert(this.value);/*para recuperar o valor do campo*/
}
}
Resultado;
Digite uma palavra e clique na área do documento
Obs: para ver o resultado na janela de script, clicar na área do documento.
Para finalizar: com this é possível acessar direto o elemento que recebeu esse manipulador de eventos.
Através dessa palavra chave pode-se acessar funções e atributos do elemento. Para validação de formulários
o uso de this será importante para verificar o valor de um campo, se atende a uma expressão regular,
tamanho mínimo e máximo, se está em branco ou preenchido.
Nos exemplos anteriores foram vistos como associar uma função que é disparada pelo internauta, quando ele clica em botão, quando coloca o cursor do mouse em um campo etc. É muito útil para ao carregar uma página dar um foco (fazer o cursor piscar dentro da cixa de texto pou exemplo)
No Html:
<a id= "botao2" href= "expressoes-regulares.html" >Regex</a>
Esse botão abrirá desse mesmo tutorial, a página de Expressões Regulares.