Como usar event listeners com JavaScript

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 relação ao CSS, essa separação pode ser feita através de classes e ids declaradas em um arquivo externo e, aplicadas aos elementos HTML. Já em JavaScript, usa-se event listeners. Aprenda neste tutorial o que são e como usá-los.

Clique aqui e aprenda a desenvolver com jQuery!

O que é um evento?

Evento são ações relacionadas ao estado da página e seus elementos. Quando você clica um botão, é lançado o evento onclick, por exemplo.

O que é um 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 fica 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 flexibilidade. A forma ideal é adicioná-los usando a função addEventListener(), ou o atributo relacionado ao evento, dentro do JavaScript. Veja o exemplo:

window.onload = function() // Quando a página estiver carregada
{
   // onmouseover
   document.getElementById('alerta').addEventListener('mouseover', function()
   {
      this.style.color = 'red'; // Modifica a cor do texto
   }, false);

   // onmouseout
   document.getElementById('alerta').onmouseout = function()
   {
      this.style.color = 'black'; // Modifica a cor do texto
   }
}

<input type="button" value="Pressione-me" id="alerta" />

É importante que os event listeners sejam adicionados apenas após a página ter sido carregada completamente (por isso o uso do evento window.onload). A função elemento.addEventListener(type, listener, useCapture) recebe três parâmetros: o primeiro é uma string contendo o nome do evento (sem o "on", por exemplo: "click" para o evento onclick), o segundo é um ponteiro para a função que será o event listener.

Flexibilidade dos event listeners

Uma das vantagens do event listener sobre os atributos de eventos do HTML é a sua flexibilidade, permitindo escolher a função a ser usada através de uma dada condição. Veja o exemplo:

function eventListener1()
{
   this.style.color = 'black';
}

function eventListener2()
{
   this.style.color = 'red';
}

window.onload = function() // Quando a página estiver carregada
{
   // Aplica este event listener se a página atual for http://ricvelozo.blogspot.com
   if (location.href === 'http://ricvelozo.blogspot.com')
   {
      document.getElementById('alerta').onclick = eventListener1;
   }
   else
   {
      document.getElementById('alerta').onclick = eventListener2;
   }
}

Postagens relacionadas

• Introdução ao jQuery
• Como criar o efeito de marca d’água numa caixa de texto
• Como validar formulários com JavaScript
• Como chamar um script em uma página
• Como modificar uma página, com JavaScript
• Como usar funções em JavaScript