fundo
Existem vários problemas menores ao vincular eventos usando addEventListener () ou AnexeEvent () em JavaScript:
1. A função anônima adicionada usando addEventListener () ou AnexeEvent () não pode ser removida.
A cópia do código é a seguinte: var obtn = document.getElementById ('btn');
obtn.addeventListener ('click', function () {
Alerta ('Botão é clicado')
},falso)
obtn.reomveEventListener ('click', function () {
Alerta ('Botão é clicado')
},falso)
// O evento no obtn não pode ser removido porque uma função anônima é passada
2. No IE6-IE8, o problema de execução da ordem reversa de vários eventos é delimitada usando o anexo ().
A cópia do código é a seguinte:
var obtn = document.getElementById ('btn');
obtn.attachevent ('OnClick', function () {
Alerta (1)
})
obtn.attachevent ('OnClick', function () {
Alerta (2)
})
obtn.attachevent ('OnClick', function () {
Alerta (3)
})
// EIE9+ Ordem de execução 1, 2, 3
// Ordens de execução sob IE6-II8 3, 2, 1
Resolva o problema
Quero escrever um módulo de ligação de eventos entre navegadores para que ele possa ser reutilizado mais tarde e, ao mesmo tempo, quero resolver o problema de apelação. O JQuery usa filas de eventos e mecanismos de cache de dados para resolver esse problema. Eu olhei para o código -fonte relevante. Foi realmente complicado. Eu tentei alguns métodos e mal os implementei. O código é publicado no Orientado a Objetos, e eu não quero que as pessoas o vejam complicado, então eu o transformo em funções para organizá-lo.
A cópia do código é a seguinte:
/*Interface de evento de ligação
*
*@param {dom-dom} e {type-string} e {fn-função} parâmetros opcionais {fnName-string}
*@Execute Crie uma fila de eventos e adicione -a às propriedades do objeto DOM.
Adicionar manipulador de eventos (função) à fila de eventos
Um identificador pode ser adicionado ao manipulador de eventos para excluir o manipulador de eventos especificado
*/
função bind (dom, tipo, fn, fnname) {
dom.eventqueue = dom.eventqueue || {};
Dom.EventQueue [TYPE] = DOM.EVENTQUEUE [TIPO] || {};
Dom.Handler = Dom.Handler || {};
if (! fnName) {
var index = Queuel comprimento (DOM, tipo);
dom.EventQueue [Type] ['fNqueue'+Índice] = fn;
}
outro {
Dom.EventQueue [Type] [fnName] = fn;
};
if (! dom.Handler [Type]) bindEvent (DOM, tipo);
};
/*Evento de ligação
*
*@param {dom-dom} e {type-string}
*@EXECUTE EVENTOS ESTÃO APENAS ONEMENTE, o manipulador é usado para atravessar manipuladores de eventos (funções) na fila de eventos de execução
*@ligador de chamadas ()
*/
função bindEvent (dom, tipo) {
dom.Handler [tipo] = function () {
para (var guid em dom.eventqueue [tipo]) {
Dom.EventQueue [Type] [GUID] .Call (DOM);
}
};
if (window.addeventListener) {
dom.addeventListener (tipo, dom.handler [type], false);
}
outro {
dom.attachevent ('on'+tipo, dom.handler [tipo]);
};
};
/*Remova a interface para o evento
*
*@param {dom-dom} e {type-string} parâmetros opcionais {fnName-function}
*@Execute Se não houver identificador, execute o desbruevent ()
Se houver um identificador, o manipulador de eventos especificado será excluído. Se o comprimento da fila de eventos for 0, o desbruevent () será executado.
*/
function Unbind (dom, tipo, fnname) {
var hasQueue = dom.eventqueue && dom.eventqueue [type];
if (! hasqueue) retornar;
if (! fnName) {
Unbiendevent (DOM, tipo)
}
outro {
excluir dom.eventqueue [type] [fnName];
if (Queuelngth (dom, tipo) == 0) Unbindevent (DOM, Type);
};
};
/*Remova o evento
*
*@param {dom-dom} e {type-string}
*@Execute remove o manipulador de eventos vinculados e limpa a fila do evento
*@chamador desbrip ()
*/
função desbruevent (dom, tipo) {
if (window.removeEventListener) {
Dom.removeEventListener (Type, Dom.Handler [Type])
}
outro {
Dom.Detachevent (Type, Dom.Handler [Type])
}
excluir dom.eventQueue [tipo];
};
/*Judge Event Fileue Comprimento
*
*@param {dom-dom} e {type-string}
*@chamador bind () desbrind ()
*/
função queelgth (dom, tipo) {
var índice = 0;
for (var comprimento em dom.eventqueue [tipo]) {
índice ++;
}
Índice de retorno;
};
Como usar
A cópia do código é a seguinte:
var obtn = document.getElementById ('btn');
// Evento de ligação
// vincular três funções de evento de clique ao mesmo tempo para o botão
// a ordem de execução sob o IE6-IIE8 permanece inalterada
bind (obtn, 'click', function () {
alerta (1);
})
bind (obtn, 'click', function () {
alerta (2);
}, 'myfn')
bind (obtn, 'click', function () {
alerta (3);
})
// Remova o evento
// Remova todas as funções de eventos de cliques de cliques, suporte de suporte de funções anônimas
não
// Remover apenas funções de evento com identificador myfn
não
Idéias de programa
A idéia principal do programa é adicionar a fila de eventos como um atributo do objeto do elemento DOM ao elemento DOM sem poluir o ambiente global. Isso pode resolver o problema do armazenamento de dados de várias funções de eventos de diferentes elementos DOM que se ligam a diferentes tipos de eventos.
A cópia do código é a seguinte:
// fila de eventos no elemento DOM
dom {
EventQueue: {
'Clique': {
fNqueue1: função,
myfn: função,
fNQueue3: função
}
'mouseOver': {
fNqueue1: função,
fNqueue2: função
}
}
}
Cada vez, a função de evento é adicionada primeiro à fila de eventos do tipo de evento correspondente, e o evento está vinculado apenas uma vez. Quando um evento é acionado, a função de evento Handler é executada e o manipulador atravessa a função de evento na fila de eventos de execução.
O Unbind () remove todas as funções de evento vinculado se não houver identificador de entrada, suporta a remoção de funções anônimas e remove as funções de evento especificado se houver um identificador.
A lógica do programa não é complicada e pode haver problemas e problemas de desempenho. Se você estiver interessado, pode orientar e se comunicar.