Métodos comuns de ligação a eventos: ligação tradicional, método de ligação W3C e método de ligação do IE . No entanto, o que é importante para nós no desenvolvimento real é exigir um método geral de ligação ao navegador interno. Se pesquisarmos na Internet, encontraremos muitos métodos. Aqui estão alguns métodos mais conhecidos:
Antes de iniciar o semestre, devemos discutir quais requisitos um bom método addEvent () deve atender:
um. O mesmo identificador de evento que suporta o mesmo elemento pode vincular várias funções de escuta;
b. Se a mesma função for registrada várias vezes no mesmo identificador de evento do mesmo elemento, todos os registros após o primeiro registro serão ignorados;
c. Isso no corpo da função deve apontar para o nó que está processando o evento (como o nó que está atualmente executando o manipulador de eventos);
d. A ordem de execução da função de escuta deve ser executada na ordem vinculada;
e. Não use o evento = evento || Window.Event; no corpo da função para normalizar o objeto de evento;
1. A função addEvent () escrita por John Resig
função addEvent (obj, tipo, fn) {if (obj.attachevent) {obj ['e'+tipo+fn] = fn; obj [tipo+fn] = function () {obj ['e'+tipo+fn] (janela.event);} obj.attachevent ('on'+tipo, obj [tipo+fn]); } else obj.addeventListener (tipo, fn, false); } função removervent (obj, tipo, fn) {if (obj.detachevent) {obj.detachevent ('on'+type, obj [tipo+fn]); obj [tipo+fn] = null; } else obj.removeEventListener (tipo, fn, false); }É realmente surpreendente que essa função seja tão simples e fácil de entender. Então ainda precisamos olhar para os cinco requisitos acima:
Satisfeito com o primeiro ponto;
Devo ter ficado satisfeito com o terceiro e o quinto pontos;
Para o segundo ponto, não está satisfeito porque o addEventListener () ignora o registro duplicado, enquanto onetEvent () não;
No entanto, o quarto ponto não é atendido, porque o padrão DOM não determina a ordem das funções de processamento de tempo para chamar um objeto, portanto, não deve ser considerado como certo que eles são chamados na ordem de registro.
Mas essa função ainda é uma função muito boa.
2. A função addEvent () escrita por Dean Edward
função addEvent (elemento, tipo, manipulador) {if (! handler. $$ guid) manipulador. $$ guid = addEvent.guid ++; if (! element.events) element.events = {}; var manipuladores = element.events [type]; if (! manipuladores) {manipuladores = element.events [type] = {}; if (elemento ["on" + type]) {manipuladores [0] = elemento ["on" + tipo]; }} manipuladores [manipulador. $$ guid] = manipulador; elemento ["on" + type] = handleEvent;} addEvent.guid = 1; function removevent (elemento, tipo, manipulador) {if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }} função handleEvent (event) {var returnValue = true; Evento = Evento || FixEvent (Window.Event); var manipuladores = this.events [event.type]; para (var i nos manipuladores) {this. $$ handleEvent = manipuladores [i]; if (this. $$ handleEvent (evento) === false) {returnValue = false; }} retornar retornarValue;}; function fixEvent (event) {event.preventDefault = fixEvent.PreventDefault; event.stopPropagation = FixEvent.StopPropagation; retornar event;}; fixEvent.PreventDefault = function () {this.returnValue = false;}; fixEvent.stopPropagation = function () {this.cancelbubble = true;};Esta função usa métodos de ligação tradicionais , para que funcione em todos os navegadores sem causar vazamentos de memória.
Mas para os 5 pontos propostos originalmente, a função satisfaz apenas os quatro primeiros pontos. Somente o último ponto não é atendido, porque em JavaScript a ordem de execução de declarações para/in não é especificada na ordem de atribuição, embora na maioria das vezes seja executada na ordem esperada, portanto a ordem dessa afirmação pode ser diferente em diferentes versões ou implementações JavaScript.
3. Melhoria da função addEvent () de Dean Edward
Array.prototype.IndexOf = function (obj) {var resultado = -1, comprimento = this.length, i = comprimento - 1; para (; i> = 0; i--) {if (this [i] == obj) {resultado = i; quebrar; }} return resultado;} Array.prototype.contains = function (obj) {return (this.indexOf (obj)> = 0)} Array.prototype.append = function (obj, nodUp) {if (! }} Array.prototype.remove = function (obj) {var index = this.indexOf (obj); if (! index) retornar; Retorne this.splice (index, 1);}; função addEvent (elemento, tipo, diversão) {if (! element.events) element.events = {}; var manipuladores = element.events [type]; if (! manipuladores) {manipuladores = element.events [type] = []; if (elemento ['on' + type]) {manipuladores [0] = elemento ['no' + tipo]; }} handlers.append (diversão, true) elemento ['on' + type] = handleEvent;} função removevent (elemento, tipo, diversão) {if (element.events && element.events [type]) {element.events [type] .remove (fun); }} função handleEvent (event) {var returnValue = true, i = 0; Evento = Evento || FixEvent (Window.Event); var manipuladores = this.events [event.type], comprimento = manipuladores.length; para (; i <comprimento; i ++) {if (manipuladores [i] .call (this, event) === false) {returnValue = false; }} returnValVeValue;} função fixEvent (event) {event.preventDefault = fixEvent.preventDefault; event.stopPropagation = FixEvent.StopPropagation; retorno event;} fixEvent.preventDefault = function () {this.returnValue = false;}; fixEvent.stopPropagation = function () {this.cancelbubble = true;};Esta função é minha melhoria na função addEvent () de Dean Edward, que atende totalmente aos 5 requisitos iniciais. Espero que seja útil para o aprendizado de todos. Obrigado pela sua leitura.