Antes de mais nada, o que é um evento?

Evento como o próprio nome diz, é um evento que acontece na pagina, uma ação, pode ser um clique do mouse, uma tecla que foi pressionada no teclado, o carregamento da pagina, redimensionamento da pagina, passar o mouse sobre algo, enfim, muitas coisas podem ser tratadas como eventos.

Mas como pegar esses eventos?

Para isso existem os gestores de eventos, ou em inglês, Event Handlers.

Quem são esses caras?

Temos vários gestores de eventos, alguns principais relaciono abaixo e explicando quando são ativados:

• onload - Quando o objeto é carregado.
• onclick - Quando o mouse clica em algum objeto.
• onmouseover - Quando o mouse passa sobre algum objeto.
• onkeypress - Quando uma tecla do teclado é pressionada.
• onresize - Quando o objeto tem suas medidas modificadas.
• onsubmit - Quando um botão do tipo submit é clicado.

Para ver a lista completa desses gestores recomendo a W3C Schools(Inglês):
http://www.w3schools.com/htmldom/dom_obj_event.asp

Então existem 2 formas de usarmos esses gestores de eventos, uma é aplicar diretamente a tag, eu além de achar feio é desorganizado, e não segue o padrão de desenvolvimento por camadas, mas querendo seria feito assim:


<a href="http://www.fazedordesite.com/" onclick="contaClick(this.id)" id="link_fs">Fazedor de Site</a>

O código acima além de ter um link, inserirmos o gestor de eventos, onclick, ou seja, quando esse link for clicado, antes de carregar o site, executara a função contaClick, que poderia ter um Ajax por trás inserindo os cliques nesse link em um banco de dados.

A outra forma a ser trabalhada é em um arquivo .js separado do html, como na Galeria de Fotos que vocês acompanharam o desenvolvimento.

La por exemplo usei o seguinte:

window.onload=checaLinks;

Neste pedacinho de código o que fiz?
Inseri um gestor de eventos que ao carregar toda a pagina html executa a função checaLinks, essa função varre todos os links atrás dos links corretos que compunham a Galeria de Fotos.

O primeiro exemplo não é errado, porém não segue as boas praticas de programação, e acaba com qualquer possibilidade de encapsulamento, então sempre que possível é bom evitar, e mesmo se impossível.

Pronto é isso! Não? como assim?

Ah sim, ai vem a W3C e diz, isso tudo ai não é errado, mas nos recomendamos usar o addEventListener.
Como?
addEventListener, ou seja, criar um ouvinte, que vai ficar esperando ação ocorrer.

Vejam aqui a recomendação.

Bom ai entramos em uma função que é receita de bolo, que podem usar sempre igual:

	
	function adicionarEvento(objeto, TipoEvento, funcao){
		if(objeto.addEventListener){ // todos navegadores menos IE
			objeto.addEventListener(TipoEvento, funcao, false);
			return true;
		} else if (objeto.attachEvent){ // IE
			var r = objeto.attachEvent('on'+TipoEvento, funcao);
			return r;
		} else {
			return false;
		}
	}
	

Acima é a função a ser inserida no arquivo JS, para chamar a função, por exemplo quando a pagina é carregada, ao invés de você usar o window.onload podem fazer assim:

adicionarEvento(window, "load", inicia);

No primeiro parâmetro deve passar o objeto que esperamos a ação, o segundo é o evento que estamos esperando, e o terceiro, a função a ser executada quando esse evento ocorrer.
No lugar de window poderia ser uma div, no lugar de load poderia ser onclick, enfim, podemos trabalhar com qualquer evento assim como nos exemplos anteriores.

Na Galeria de fotos eu usei o window.onload, primeiro para ficar mais fácil a compreensão, segundo porque quando é um código, simples, ou pequeno, sempre trabalho com ele.

Para concluir gostaria de informar que ganhei 1 dólar ontem!
Cheguei aos 4,06 dólares, e pretendo seguir algumas idéias que li nos comentários como comprar ações da Google, e investimento em biocombustíveis, já estou analisando a possibilidade de montar minha própria Usina.

Mas brincadeiras a parte, acho muito legal essa interação sempre descontraída por parte todos, torna ainda mais prazeroso estar aqui todos os dias, valeu mesmo!

Trackback para este Post | Assine o Feed RSS dos comentários