Como usar event listeners com JavaScript
Autor: Ricardo Veloso | Publicado: 2011-05-07T21:41:00-03:00



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
   }
}

&lt;input type="button" value="Pressione-me" id="alerta" /&gt;



É 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