sábado, 7 de maio de 2011

Como usar event listeners com JavaScript

Tag <script>

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.

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

5 comentários:

Anônimo disse...

muito boa explicação

Anônimo disse...

muito bom parabéns

Alex de Carvalho disse...

Boa Explicação, ficou muito simples

Anônimo disse...

Sou iniciante em programação e to queimando os neurônios (devo ter só 2) para entender javascript.. Queria saber como eu chamo uma function para executar eu uma div do html... Bem, é o seguinte, eu criei um js externo e incorporei dentro do head, depois no arquivo externo coloquei um document.write("Hello World") ... Okay; o Hello World apareceu no html, dai criei um layout css e quis colocar esse document.write(Hello World") dentro de uma das divs do layout. Então pensei, para o js não aparecer fora do layout deveria criar uma function e chama-la dentro da div html que me convém, mas não sei como chamar o arquivo. Queria chama-lo com js onload (Sem botoes), mas no html (Dentro da div) não sei como chamar uma function externa que respeite os limites impostos ao texto pelo css. - Se souber como me ajudar, obrigado! (email: ro_rds@hotmail.com)

Ricardo Silva Veloso disse...

Não sei se entendi bem sua dúvida. Se você quer inserir texto dentro de uma div, você pode selecioná-la usando id, ou classe, e inserir o texto:

window.onload = function () {
document.getElementById('text').innerHTML = 'Hello World';
}

Ou você pode executar o script diretamente na página, usando 'document.write()', o que não é o ideal:

<div><script>document.write('Hello World');</script></div>

Postar um comentário