« Voltar
em frontend javascript jquery

Associando várias funções ao mesmo evento no Javascript.

Para selecionar um botão em sua página e associar uma função ao seu clique podemos fazer:

document.querySelector('#botao').onclick = function() {  
    //Faz alguma coisa
};

Isso é bacana, funciona e tal mas tem um problema: se eu quiser associar outra função à esse mesmo evento eu substituirei a anterior:

document.querySelector('#botao').onclick = function() {  
    //Faz alguma coisa
};

//O código abaixo funciona, mas substituindo a função anterior. Somente essa será executada:
document.querySelector('#botao').onclick = function() {  
    //Faz alguma outra coisa coisa
};

O que fazemos então?
Usamos o addEventListener:

document.querySelector('#botao').addEventListener('click', function() {  
   // faz alguma coisa aqui
});

//Se quiser adicionar outra, posso fazer sem substituir a anterior:
document.querySelector('#botao').addEventListener('click', function() {  
   // faz alguma outra coisa
});

Legal, não?

Mas, como nem tudo são flores nessa vida, o addEventListener não é suportado pelo Internet Explorer 8 e versões anteriores. Nele temos que usar o attachEvent ao invés do addEventListener.

A solução então é escrevermos um código para os navegadores "normais" e um código especificamente para o IE8:

var botao = document.getElementById("botao");  
if (botao.attachEvent) {  
    botao.attachEvent("onclick", function (event) {
    alert("Esse serve pro IE8 e inferior");
});
} else if (botao.addEventListener) {
    botao.addEventListener("click", function (event) {
    alert("Esse pros outros navegadores")
    }, false);
}

Mas poxa, escrever código assim é triste né? :(

jQuery ao resgate

Não é novidade que o jQuery facilita muito a vida na hora de escrever código Javascript né.
Pra esse caso específico, podemos escrever o código acima da seguinte forma com ele:

$("#botao").click(function (event) {
    alert("Funciona pra todos os browsers!");
});

Da hora, né? E podemos adicionar quantas funções quisermos ao mesmo evento que o jQuery cuida internamente da compatibilidade pra gente (:


Quer ganhar 15% de desconto pra gastar na Casa do Código e ainda ficar em dia com as minhas postagem e outras promoções e sorteios legais? Assina minha newsletter: http://gabsferreira.com/newsletter/ (:

Se quiser, curta minha página no Face também! O endereço é https://www.facebook.com/devgabsferreira

comments powered by Disqus