Múltiplas funções para os eventos em elementos HTML

Por caugbr | 29 de novembro de 2007

Já havia me deparado com esse problema algumas vezes e sempre contornava, sem pensar em uma solução. Acontece que estou no meio da organização de uma biblioteca js - algo que me evite a criação de um novo arquivo js com as mesmas funções a cada novo projeto. Bem, o fato é que novamente encontrei a mesma dificuldade... vou criar um exemplo simples para explicar. Supondo que temos as seguintes funções:

  1. function toRed() {
  2. this.style.color = "red";
  3. }
  4. function toBlue() {
  5. this.style.color = "blue";
  6. }

Então pego um div e copio as funções para os eventos mouseover e mouseout:

  1. var div = document.getElementById('meudiv');
  2. div.onmouseover = toRed;
  3. div.onmouseout = toBlue;

Bacana, isso vai funcionar que é uma beleza. Mas durante a navegação, meu visitante executou uma ação que precisou adicionar mais um comando ao evento mouseover do mesmo div, mas não quero perder as ações que já estão lá. Se usar novamente comandos como os que usei acima, a função será substituída pela nova... Aí lembrei daquela famosa função addEvent(), que usa os métodos addEventListener ou attachEvent, isso tanto para objetos tipo Object quanto para elementos HTML, "pegos" via DOM. Bem, funcionou, as funções foram executadas, mas aí eu fiz a incrível descoberta de que esses métodos não criam uma propriedade no elemento com a função enviada. Ao invés disso, ela é executada "externamente ao objeto", portanto a minha palavra this não aponta para o meu elemento, mas para o objeto window.

Bolei então um modo de resolver essa situação criando uma propriedade chamada events no elemento. É um objeto que vai armazenando as funções registradas para os eventos e para gerenciar isso vamos inserir alguns novos métodos no elemento: addEvent, removeEvent, clearEvent, hasEvent e fireEvent. Para que tudo aconteça, criamos a função elementEvents, que aplica os novos métodos ao elemento enviado - e função extendAll apenas para aplicar a primeira a todos os elementos da página. Veja o código:

  1. function elementEvents(el) {
  2.   el.addEvent = function addEvent(evname, func) {
  3.   evname = /^on/.test(evname) ? evname : "on"+evname;
  4.   var fire = new Function("e", "this.fireEvent(\""+evname+
  5.                                "\", e || window.event);");
  6.     if(typeof this.events == "undefined") this.events = {};
  7.     if(typeof this.events[evname] == "undefined")
  8.       this.events[evname] = [];
  9.     if(typeof this[evname] == 'function' &&
  10.        this[evname].toString() != fire.toString())
  11.       this.events[evname].push(this[evname]);
  12.     if(!this.hasEvent(evname, func)) this.events[evname].push(func);
  13.   this[evname] = fire;
  14.   return this;
  15.   };
  16.  
  17.   el.removeEvent = function (evname, func) {
  18.   evname = /^on/.test(evname) ? evname : "on"+evname;
  19.     if(typeof this.events == "undefined" ||
  20.        typeof this.events[evname] == "undefined" ||
  21.        !this.events[evname].length) return this;
  22.   var ret = [];
  23.     for(var i = 0; i < this.events[evname].length; i++)
  24.       if(this.events[evname][i].toString() != func.toString())
  25.         ret.push(this.events[evname][i]);
  26.   this.events[evname] = ret;
  27.   return this;
  28.   };
  29.  
  30.   el.clearEvent = function (evname) {
  31.   evname = /^on/.test(evname) ? evname : "on"+evname;
  32.     if(typeof this.events == "object" &&
  33.        typeof this.events[evname] != "undefined" &&
  34.        this.events[evname].length) delete(this.events[evname]);
  35.   this[evname] = null;
  36.   return this;
  37.   };
  38.  
  39.   el.hasEvent = function (evname, func) {
  40.   evname = /^on/.test(evname) ? evname : "on"+evname;
  41.     if(typeof this.events == "undefined" ||
  42.        typeof this.events[evname] == "undefined" ||
  43.        !this.events[evname].length) return false;
  44.     for(var i = 0; i < this.events[evname].length; i++)
  45.       if(this.events[evname][i].toString() == func.toString())
  46.         return true;
  47.   return false;
  48.   };
  49.  
  50.   el.fireEvent = function (evname, ev) {
  51.   evname = /^on/.test(evname) ? evname : "on"+evname;
  52.     if(typeof this.events[evname] == "undefined") return true;
  53.     for(var i = 0; i < this.events[evname].length; i++) {
  54.       if(typeof this.events[evname][i] == "function") {
  55.       this.tempFunction = this.events[evname][i];
  56.       this.tempFunction(ev);
  57.       }
  58.     }
  59.   };
  60. return el;
  61. }
  62.  
  63. function extendAll() {
  64. var els = document.getElementsByTagName("*");
  65.   for(var i = 0; i < els.length; i++) elementEvents(els[i]);
  66. }
  67.  
  68. // window.onload = extendAll;
  69. // ou...
  70. // addEvent(window, 'load', extendAll);

As últimas linhas mostram duas maneiras diferentes de aplicar a função extendAll ao evento onload do objeto window, fazendo com que os mátodos sejam aplicados a todos os elementos da página. Mas podemos usar o sistema em um elemento específico... veja:

  1. var div = document.getElementById('meudiv');
  2. elementEvents(div);
  3. div.addEvent('mouseover', toRed);
  4. div.addEvent('mouseout', toBlue);
  5. div.addEvent('mouseover',
  6.              function() {
  7.              this.style.border = "2px solid #666";
  8.              });
  9. div.addEvent('mouseout',
  10.              function() {
  11.              this.style.borderWidth = "0px";
  12.              });

Após esses comandos, a propriedade events do div estará com a seguinte anatomia:

  1. {
  2.   'mouseover': [
  3.     function() { this.style.color = "red"; },
  4.     function() { this.style.border = "2px solid #666"; }
  5.   ],
  6.   'mouseout': [
  7.     function() { this.style.color = "blue"; },
  8.     function() { this.style.borderWidth = "0px"; }
  9.   ]
  10. }
  11.  

As funções de cada evento serão executadas na seqüência do array de funções, mas até aí nada... se simplesmente executarmos as funções num loop, o this ainda não estará apontando para o elemento. A mágica está no método tempFunction, criado em fireEvent, que recebe a função e a executa como parte do objeto. Isso faz com que o evento seja repassado corretamente (inclusive para IE) e que a palavra this aponte para o próprio elemento.

Veja aqui uma página de testes

Categoria:Sem categoria
Permalink | Faça um comentário ou um trackback.

Um comentário

  1. Micox
    Em 2 de abril de 2008 às 16:46 | Permalink

    Opa, isso aqui é uma ótima solução visto que trabalhar com o addEventListener não nos dá um controle total (também não permite clonagem do evento caso clonemos o objeto html).
    Mas você também poderia ter pegado o target lá dentro da função, veja isto: http://elcio.com.br/crossbrowser/#7

Faça um comentário

Seu email nunca mostrado ou compartilhado. Os campos com * são obrigatórios

*
*