Eventos em Javascript – Parte 1

Pessoal, vou falar sobre eventos, coisa que pode parecer muito chata, principalmente para iniciantes, mas na verdade é muito legal, pois é ai que vem a interatividade que buscamos quando o usuário executa uma ação e espera uma reação. Acaba sendo chata pelos diversos modelos de se registrar eventos, as diferenças dos eventos e a ordem em que eles se propagam de evento a evento. Vou detalhar cada modelo aqui, mas antes algumas observações:

Não falarei sobre tratamento de eventos, isso é assunto para outro post.

Todo o evento é executado antes da ação padrão, depois é que, dependendo da resposta da função, a função padrão vai ser executada.

Pseudo Protocolo Javascript

Que? Agora javascript também tem protocolo?

Não, é o browser que simula isso. Usado somente em links, é como o "mailto" também, normalmente quando o usamos, deviamos redirecionar a página. Eu acho que esse é o pior meio de se registrar eventos. Usamos "javascript:" seguido de um código javascript, que se retornar algo será exibido como uma nova página.

<a href="javascript: var log=fnc();">teste</a>

Modelo Inline

Talvez o mais usado, pela facilidade de implementação e ser totalmente cross-browser, até em browsers mais antigos. Mas o menos aconselhável, pois com ele se mistura conteúdo com comportamento, o que além de poder dificultar a manutenção mais tarde, também dificulta usuários sem Javascript.

Nesse modelo os eventos são registrados como atributos de algum elemento. Olhe o exemplo abaixo:

<a href="http://teste.com" onclick="fnc(event, this); return false">teste</a>

O evento está contido no atributo do elemento <a>, que chama a função "fnc" com os argumentos "event" e "this" e retorna "false". O argumento "event" é uma palavra-chave referente ao objeto evento, só disponível neste modelo. O argumento "this" é outra palavra-chave que se refere ao elemento em si, o próprio <a>. Já quando retornamos false ("return false") estamos dizendo ao browser para não executar a ação padrão, ou seja, prevenir a execução padrão relacionada àquele objeto, que neste caso é seguir o link indicado.

Modelo Tradicional

É uma evolução do modelo anterior, usando o inline não se tinha muita flexibilidade para modificar eventos. Também é muito compativel entre browsers até em alguns um pouco antigos. No modelo inline mudar o evento de diversas páginas seria um trabalho duro, já com esse modelo, fica fácil percorrer a árvore DOM e modificar eventos dos objetos, como adicionar, remover, e executar.

Adicionar eventos

node.onclick=fnc

Aqui somente associamos a função "fnc" ao atributo "onclick" do elemento "node"

Remover Eventos

node.onclick=null

Associamos um valor nulo ao elemento, portanto removendo a função anteriormente associada

Executar eventos

node.onclick()

Executamos o evento chamando o atributo "onlick" com parêntesis.

Atenção a "regra dos parêntesis":

Ihh, agora que num entendo mesmo…

Calma, é simples: Em Javascript, uma variável pode conter uma função, seja anônima ou não. E essa variável quando consultada sem parêntesis retorna ela mesma como um objeto "Function", já quando ele é chamada com parêntesis ela é executada e retorna o valor quer resultará de sua execução, o que vem depois de "return" no corpo da função. Então, objetos são, a grosso modo, uma "coleção de atributos, a medida que contém ou não funções" que podem ou não virar métodos, se associarmos funções a eles. Com eventos não é diferente, o elemento possui o atributo "onclick" que pode ser associado à uma função, e assim ser executada quando o usuário clicar no elemento.

Apesar de dizer que não falarei sobre tratamento de eventos, olhem o exemplo abaixo. Em todos os browsers padrões (lê-se todos menos o IE) é fácil acessar um evento, é só colocarmos um argumento formal na função (por convenção o argumento que contém o evento se chamará "e"), mas o IE não segue os padrões e para acessar um evento nele é necessário chamar "window.event".

1 function fnc(e){
2     var ev=(!e)?window.event:e
3 }

Só mais algumas observações: a palavra chave "this" também pode ser acessada como referencia ao elemento. Pode-se usar funções anônimas também.

Desvantagens e Problemas

O grande problema desse modelo é que não se pode adicionar mais de uma função a um evento como no modelo Avançado. Olhe o exemplo

node.onclick=fnc
node.onclick=fnc2

Mas… Qual vai ser o evento disparado, os dois?

Não, o que vai ser disparado é o segundo já que foi associado depois, portanto sobrescreveu o anterior, lembra quando falei sobre objetos, atributos podem ser definidos e redefinidos de cada objeto (atenção, não classe), como quando removemos uma função.

Isso pode ser simplesmente contornado, verificando se há alguma função anterior relacionada ao evento e adicionando uma função ao novo contendo a nova e antiga. Vamos supor que você associou "fnc" ao evento antes, e códigos depois resolver adicionar "fnc2".

Num to entendendo nada.

Observe o exemplo que você vai entender melhor:

1 node.onclick=fnc
2 //Codigos depois....
3 oldfnc=(node.onclick)?node.onclick:function(){}
4 node.onclick=function(e){oldfnc(e); return fnc2(e);}

Viu como ficou fácil, ainda consiguimos passar os argumentos e retornar o valor da última função (no caso "fnc2").

Particularmente, esse é o modelo que eu prefiro, por ser fácil, flexível e cross-browser. Acho até melhor que o modelo avançado, por exemplo, quando você quer determinar simplesmente uma ação a algum elemento que sabe que não irá mudar, por que usar o avançado? Keep it simple, stupid! Mas em alguns casos que citarei no próximo post, o melhor modo é o avançado.

No próximo post falarei sobre o modelo avançado, o mais discutido, e tratamento de eventos, também muito discutido. O próximo vai ser menos cross-browser, esses dois modelos anteriores, como já disse, funcionam em todos os navegadores menos os maaaiiisss antigos.

Flwss, e comenta please!

Anúncios

10 Responses to Eventos em Javascript – Parte 1

  1. Julio Greff disse:

    Legal, gostei do artigo (do começo, ainda não li tudo). Vai me ser útil (não sou nenhum especialista nesse negócio).

  2. Micox disse:

    Umm, acho que a idéia é boa, só não gostei da didática. Complicou muita coisa que era simples.
    Mas valeu ae.

  3. People, vlw pelos comments…
    Micox,
    Acho que algumas coisas pareceram meio dificeis de entender, e olha que “preparei” esse artigo hein… Ainda vem o modelo Avançado que é mais chato ainda…
    Flwss

  4. Ramon disse:

    Olá Bernardo,
    Seu blog é show, “feedlizei” eletem um tempinho, mas nunca comentei. Eu acho essencial esse conceito de eventos. O post está muito bem elaborado.

    fuiii…

  5. Opa Brigadão Brodi!!
    Flwss

  6. […] Avançado de registro de Eventos em Javascript, continuação do post "Eventos em Javascript – Parte 1" em que eu falei sobre outros […]

  7. Dennin Dalke disse:

    É parênteses e não parêntesis. =P

  8. ulisses disse:

    Bacana, estou com um problema, eu quero adicionar uma função a um elemento com parametros.

    Meu código:

    node.oncilck = funcao(parametro1,parametro2,parametro3);

    Só que o problema é que está executando a função. Só queria adicionar para alguem clical e não executar. Poderia me ajudar?

  9. Victor disse:

    Ótima dica cara, não achei informações sobre esse assunto em mais luga nenhum. Ainda bem que vc escreveu sobre isso, me ajudou pacas. Obrigadão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: