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;
}
}
0 comentários:
Postar um comentário