addEventListener ou será attachEvent?

Aqui estou, para falar de assunto que acho importante, claro que eu acho importante se não achasse, aqui não estaria. addEventListener, documentado pela W3C, essa é uma forma de atribuir evento a um determinado objeto. Considero-o importante por vários motivos,  irei ater-me a apenas dois motivos:

  • Muito usado em Ajax.
  • Muito usado em Action Script.

Esses são motivos suficiente para qualquer um ficar apaixonado por ele, chega de babar ovo e irei direto ao ponto. Sintaxe:

objeto.addEventListener(evento, funcao, captura)

A função é executada, quando o evento do objeto é acionado. E o último parâmetro indica se os eventos ocorridos dentro da função deverão iniciar a chamada para outros eventos. Exemplificando:

window.addEventListener(“load”, function() { alert(“Olá Mundo.”); }, true);

Esse é um exemplo simples de uso, quando a página estiver sendo carregada exibimos um alert na tela, com a mensagem, típica, “Olá Mundo.”.No entanto, o excelentíssímo IEca, não irá rodar isso. Apesar, da W3C ser responsável pela padronização da web, o IEca não reconhece essa função, para isso a microsoft inventou o AttachEvent, que funciona de forma similar.
Enfim, o tio Bill deve ter as suas razões para tal, enquanto nós, meros mortais, não entendemos ficamos indignados com tais ações. Abaixo vai o código para os dois tipos de browsers:

function OlaMundo(){
alert(“Olá Mundo!”);
}

function addEvent(obj, evType, fn){
if (obj.addEventListener) // Usuário Inteligente
obj.addEventListener(evType, fn, true)
if (obj.attachEvent) // Usuário do IEca
obj.attachEvent(“on” + evType, fn)
}

addEvent(window, “load”, OlaMundo(), true);

Até aqui, sem problemas, tirando uma questão simples, porque fazer isso se eu posso perfeitamente atribuir evento no HTML? Como no exemplo:

<input name=”meubotao” onclick=”Minhafuncao();” type=”button” />

De fato é uma boa pergunta, e como minha mãe fala que toda boa pergunta merece uma boa resposta, é isso que eu vou tentar fazer.
O motivo é o acoplamento (acoplamento não é legal). No Web Standard a premissa é separar aparência(CSS), de estrutura(HTML) e de comportamento(Javascript). Sem contar que, fazendo isso, o encapsulamento vai pra casa da xonga, e você acopla o script ao HTML, e quanto maior o acoplamento, menor é a coesão.

Fuiii…

9 respostas para addEventListener ou será attachEvent?

  1. Enilton disse:

    olá adorei a explicação LoL
    parabéns!

    estava procurando algo sobre addEventListener e encontrei seu post.
    adorei perfeito.

    [ ]’s

  2. ramon disse:

    Pow valeu pela força, é bom saber que estou ajudando alguem,
    se vc quiser ler mais sobre web, eu me mudei de blog, aparece lá, será muito bem-vindo.

    http://coisasdeweb.blogspot.com

  3. WANDERSON disse:

    como atacha este evento via script

    addEvent(form, ‘submit’, function(){return valida(this)});

    desta forma não da certo nem para ie e nem firefox

  4. ramon disse:

    Troque o form pelo nome do botão do submit.

  5. Law disse:

    Pq não usar direto evento.função? Por exemplo: objeto.onclick=function(){acao();};

  6. ramon disse:

    Eu não disse que não pode, até utilizo bastante dessa forma a desvantagem é que, por exemplo, tenho um botão em que uma determinada situação preciso que tenha dois comportamentos que estão em funções diferente, da forma direta, vc não consegue ‘sobrecarregar’ a função, no máximo vc vai ter que escolher uma ou outra e adicionar no onclick, já com addEvent, vc pode sobrecarregar a função, isso é assunto de outro post, pois é um pouco complexo pra quem tá começando, qq dúvida me fala, que faço um post apenas sobre isso.

    Fuiiii

  7. Rodrigo disse:

    Belo post …

    mas tenho um pequeno probelma aqui … To fazendo um sisteminha em que o usuario digite o nome de uma tag e a mesma seja inserida em um local na pagina. Até aqui tudo ok, meu script funciona perfeitamente (document.createElement \o/)…
    A questão é que o usuario possa arrastar e soltar esse elemento que ele acabou de inserir (o efeito drag and drop também funciona perfeitamente)
    No meu drag and drop o id do elemento que usuario quer arrastar e passado por parametro, ou seja, eu precio indicar um evento para esse elemento e colocar a funcao responsavel pelo drag e como argumento o proprio id do elemento. Acontece que eu ja tentei usar varias formas aqui de fazer isso e sempre o usuario consegue arrastar somente o ultimo elemento inserido, se ele clica em outro, o que vai ser arrastado é o ultimo que ele inseriu sempre …é como se o id que tivesse sendo passado por argumetento fosse o id do ultimo elemento inserido … plisss help

  8. Ramon disse:

    Olá Rodrigo,
    Vc deve estar passando apenas o último id nos eventos, por isso que não deve estar funcionando, pra ajudar só vendo o código mesmo.

    Cara, vou te dar uma dica, é legal aprender o javascript assim dessa forma, sem nenhum auxilio, pois isso te dá uma noção muito grande de javascript, mas aconselho à ti escolher um framework para trabalhar, pois facilita muito a sua vida, existem alguns muito bons por ai com muita coisa pronta, inclusive o drag & drop que vc está fazendo.

    Eu utilizo o jQuery, mas tem outros bons como, Dojo, Mootools, prototype (com dobradinha script.aculo.us) etc.

    Se quiser, me passa o código que dou uma olhada e pensa sobre framework.

    fuiii…

  9. Rodrigo disse:

    ai ramon,

    valeu pela ajuda e pelas dicas ai …

    e consegui fazer o que eu queria usando o poderoso EVENT … o que tava acontecendo é que o objeto tava fazendo referencia somente a o ultimo elemento declarado …

    Mas fufou certim aqui do jeito que eu criei …

    falo , valeu

    fuii tbm …

Deixe uma resposta

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: