Olá comunidade. Inicialmente peço desculpas pela demora em continuar esta série de artigos.
Para quem não observou, informei no primeiro artigo da série que todo o conteúdo publicado é de autoria de Christian Heilmann, disponivel na versão original em inglês.
Chamadas de função
A principal técnica que nós usamos para manter nosso Javascript não-obstrutivo é deixar nossos códigos Javascript em um arquivo separado, ao invés de inserir direto na marcação do documento. Para executar nossas funções no arquivo .js, precisamos chamá-las quando a página for carregada. Isso pode ser feito de vários modos, cada um com suas vantagens e desavantagens.
O modo clássico
Quando nós eramos jovens e inocentes, nós adicionavamos o "onload" na tag body:
HTML: <body onload="foo();">
É importante lembrar que isso que faziamos era errado e não devemos fazer novamente!
Se nós chamarmos a função na tag body, significa que não evoluimos nada e ainda estamos misturando marcação com chamada de eventos. O que nós precisamos fazer é separar a chamada colocando-a dentro de nosso arquivo .js.
O modo separado
Uma solução seria adicionando a chamada da função ao evento "onload" do objeto window. Quando nós usamos somente uma função, não precisamos de parênteses no fim do nome da função. Isso retornará a função em si, e não o resultado dela.
Se nós temos mais de uma função, precisamos usar uma função anônima que chamará as outras, desta vez com parênteses.
Javascript:
window.onload=foo;
ou
window.onload=function()
{
foo();
bar();
baz();
}
Este modo de chamar as funções não é aplicável somente ao objeto window, é claro. Como mostrando anteriormente, nós podemos adicioná-lo a qualquer objeto da página e é suportado por qualquer navegador capaz de entender Javascript/DOM.
O inconveniente dessa solução é que ela não é totalmente não-obstrutiva. Se nós tivermos outro arquivo .js, esse modo subistituirá todas as outras chamadas de onload.
O verdadeiro modo não-obstrutivo
Há uma opção para adicionar eventos manipuladores, mesmo quando já existe um adicionado. Infelizmente, porém, os navegadores manipulam essa funcionalidade de modo diferente, e o IE no Mac não a suporta corretamente.
Scott Andrew escreve um ótima função que faz exatamente isso. Você apenas chama a função enviando o objeto que será adicionado o evento manipulador, o tipo do evento e o nome da função.
function addEvent(obj, evType, fn)
{
if (obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent)
{
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else
{
return false;
}
}
addEvent(window, 'load', foo);
addEvent(window, 'load', bar);
A única inconveniência é que isso não funcionará corretamente no IE rodando em sistemas Macintosh.
Leitura complementar
Eventos são um tópico completo e confuso no Javascript. Para desenvolvimento de websites, os exemplos aqui são suficientes, mas se formos para uma aplicação web, seria necessário irmos muito além disso. Estou colocando alguns links de sites (em inglês) que contém mais informações sobre os eventos e como aplicá-los aos elementos.
. A especificação do W3C DOM.
. BrainJar.com (Mike Hall) tem o artigo bastante conciso sobre eventos manipuladores
. Quirksmode.org (Peter-Paul Koch) é provavelmente uma das fontes mais pesquisadas e compactas disponível hoje sobre Javascript. Cobre também problemas do browser e tópicos teóricos gerais do Javascript.
. Scott Andrew criou uma função bastante util para adicionar eventos.
. Kryogenix.org (Stuart Langridge) possui alguns exemplos de scripts não-obstrutivos muito bons.
. DOM vs. innerHTML (Tim Scarfe) discute os beneficios e os problemas de cada um deles.
Bom pessoal, vou encerrando hoje por aqui. E em breve publicarei o último artigo da série. Qualquer duvida, favor entrar em contato. Abraços.
4 Comentários
Qual a sua opinião?