5


Eu tenho um código que é basicamente assim:

<input type="text" value="" onfocus="myFunction(this);" onblur="alert('1');">

<script>
  function myFunction(obj) {
    obj.onblur = function() {
      alert("2");
    };
  }
</script>

Como eu posso fazer para executar o evento onBlur original após o evento adicionado pela minha função?

Esse aqui é o link para a minha função completa, para vocês entenderem melhor o meu problema: http://jsbin.com/zedot/2/watch?html,js,output

3 Respostas 3

5

Solução #1 (recomendada): addEventListener

Com addEventListener você pode associar tantos event handlers a um elemento quantos forem necessários:

obj.addEventListener('blur', function() {
    alert("2");
}, false);

Para compatibilidade com o IE8, você precisa usar attachEvent:

if(obj.attachEvent) {
    elem.attachEvent('onblur', function(){
        alert("2");
    });
} else {
    obj.addEventListener('blur', function() {
        alert("2");
    }, false);
}

Naturalmente é recomendável criar uma função para isso, em vez de usar inline como no exemplo acima. Um exemplo de função está na resposta do Tuyoshi Vinicius.

Solução #2: guarde o handler anterior

Você pode guardar o handler anterior numa variável, atribuir um novo handler, e chamar o antigo de lá:

var onBlurOriginal = obj.onblur;
obj.onblur = function() {
    alert("2");
    onBlurOriginal.call(this);
};
4

Você pode usar a biblioteca jQuery que já tem esse tipo de implementação cross-browser caso você não use, o código abaixo pode ser útil.

function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
    return r;
    }
    else window.alert('error');
}

listen("blur",document.getElementById('teste'),function(){
//sua função
})
0

Esse é um problema antigo do javascript nos browseres, contornável facilmente pelo uso de bibliotecas, como o jQuery.

Usando jQuery seu exemplo ficaria assim:

<input id="txt" type="text" value="" />
<script>
function myFunction(obj) {
    $(obj).on("blur", function() {
        alert("2");
    });
}

$(function(){
    $("#txt")
    .on("focus", function () {
        myFunction(this);
    })
    .on("blur", function () {
        alert('1');
    });
});
</script>
2
  • 2
    Claro que o jQuery tem muitas utilidades, mas incluí-lo somente para resolver esse problema seria exagero.
    – bfavaretto
    Commented 14/03/2014 às 13:22
  • Só veja o problema de usar jQuery se estiver desenvolvendo a sua própria biblioteca javascript. Commented 14/03/2014 às 13:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .