Eventos são ações geradas pelo navegador web quando acontece alguma interessante no documento, no próprio navegador ou em algum elemento ou objeto associado a ele. São ocorrências a respeito das quais seu programa vai ser notificado pelo navegador. (David Flanagan em seu livro “JavaScript: O guia definitivo”, capítulo 17)

Há os mais variados tipos de eventos:

  • click, quando clicamos sobre o elemento
  • dbclick, duplo clique
  • onchange, quando algo é alterado
  • etc…

Veja os eventos que foram especificados na HTML4 (ainda na 4) e veja também os eventos na documentação do Mozilla.

Inline events

Antigamente, atribuíamos o evento diretamente no elemento HTML como no exemplo abaixo.

<button id="btn" onclick="clickMe();">Clique aqui!</button>

Isso ainda funciona, mas não é um boa prática. Veja o que Stefanov nos diz sobre o assunto: “Você pode adicionar um atributo onclick inline e isso funcionará em todos os navegadores, mas violará a separação de interesses e a melhoria progressiva. Portanto, você deve se esforçar por anexar o ‘listener’ no JavaScript, fora de qualquer marcação.”.

A solução proposta pelo Flanagam é a seguinte:

var e = document.getElementById('btn');
e.onclick = function () {
    console.log("você clicou no botão");
}

O HTML não mais precisará da propriedade onclick="".

Notamos o esforço para anexar a função ao evento sem apelar para ajuda do HTML, mas essa ainda não é o ideal, essa forma é condizente com a especificação do DOM 1. Já a especificação do DOM 2 trouxe os receptores de eventos (Event Listeners), essa é a forma ideal.

Event Listeners

Os receptores de eventos foram uma revolução especialmente pelo fato tornar possível anexar mais de um evento a um mesmo elemento.

Abaixo vemos um exemplo de receptores de evento ou listeners.

var e = document.getElementById('btn');
var foo = function () {
    console.log("você clicou no botão");
}
e.addEventListener('click', foo, false);

Quando você anexa um listener (ouvinte) de eventos a um elemento em uma página, na verdade você está fornecendo um ponteiro para uma função callback que será chamada quando o evento ocorrer. A maior parte da programação de navegador no lado do cliente é orientada a eventos. Quando a página termina de carregar, ela dispara um evento load. Então o usuário interage com a página e causa o disparo de inúmeros eventos, como click, keypress, mouseover, mousemove e assim por diante. O JavaScript é especialmente capacitado para programação orientada a eventos por causa do padrão callback, que permite a seus programas serem executados de maneira assincrona, ou, em outras palavras, fora de ordem (Padrões JavaScript, Stefanov, pág 85.).

Navegue nesta série!


Comentários

comments powered by Disqus