Métodos comunes de unión de eventos: enlace tradicional, método de unión W3C y método de unión de IE . Sin embargo, lo importante para nosotros en el desarrollo real es requerir un método general de unión de navegador cruzado. Si buscamos en Internet, encontraremos muchos métodos. Aquí hay algunos métodos más conocidos:
Antes de comenzar el semestre, debemos discutir qué requisitos debe cumplir con un buen método AddEvent ():
a. El mismo mango de evento que admite el mismo elemento puede unir múltiples funciones de escucha;
b. Si la misma función se registra varias veces en el mismo mango de evento del mismo elemento, todos los registros después del primer registro serán ignorados;
do. Esto en el cuerpo de la función debe apuntar al nodo que está procesando el evento (como el nodo que actualmente ejecuta el controlador de eventos);
d. La orden de ejecución de la función de escucha debe ejecutarse en el orden límite;
mi. No use Event = Event || Window.event; en el cuerpo de la función para normalizar el objeto del evento;
1. La función addevent () escrita por John Resig
función addEvent (obj, type, fn) {if (obj.attachevent) {obj ['e'+type+fn] = fn; obj [tipo+fn] = function () {obj ['e'+type+fn] (window.event);} obj.attachevent ('on'+type, obj [type+fn]); } else obj.addeventListener (type, fn, falso); } función remoTeVent (obj, type, fn) {if (obj.detachevent) {obj.detachevent ('on'+type, obj [type+fn]); obj [tipo+fn] = null; } else obj.removeEventListener (tipo, fn, falso); }Es realmente sorprendente que esta función sea tan simple y fácil de entender. Entonces todavía necesitamos mirar los cinco requisitos anteriores:
Satisfecho con el primer punto;
Debo haber estado satisfecho con el tercer y quinto puntos;
Para el segundo punto, no está satisfecho porque AddEventListener () ignora el registro duplicado, mientras que adjectEvent () no lo hace;
Sin embargo, el cuarto punto no está satisfecho, porque el estándar DOM no determina el orden de las funciones de procesamiento de tiempo para llamar a un objeto, por lo que no se debe dar por sentado que se llaman en el orden de registro.
Pero esta función sigue siendo una muy buena función.
2. La función addevent () escrita por Dean Edward
función addEvent (elemento, type, manejador) {if (! Handler. $$ GUID) Handler. $$ GUID = AddEvent.Guid ++; if (! element.events) element.events = {}; var manejadores = element.events [type]; if (! Handlers) {Handlers = element.events [type] = {}; if (elemento ["en" + type]) {manejadores [0] = elemento ["on" + type]; }} Handlers [Handler. $$ GUID] = Handler; elemento ["on" + type] = maneEvent;} addEvent.guid = 1; function RemoLEvent (Element, Type, Handler) {if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guía]; }} function handleEvent (evento) {var returnValue = true; evento = evento || FixEvent (Window.Event); Var manejadores = this.events [event.type]; para (var i en los manejadores) {this. $$ handleEvent = Handlers [i]; if (this. $$ handleEvent (event) === false) {returnValue = false; }} return returnValue;}; función fixEvent (event) {event.preventDefault = fixEvent.preventDefault; event.stoppropagation = fixEvent.stoppropagation; Evento de retorno;}; fixEvent.PreventDefault = function () {this.returnValue = false;}; fixEvent.StopPropagation = function () {this.cancelBubble = true;};Esta función utiliza métodos de enlace tradicionales , por lo que funciona en todos los navegadores sin causar fugas de memoria.
Pero para los 5 puntos propuestos originalmente, la función solo satisface los primeros cuatro puntos. Solo el último punto no está satisfecho, porque en JavaScript el orden de ejecución de para/en declaraciones no se especifica en el orden de asignación, aunque la mayor parte del tiempo se ejecuta en el orden esperado, por lo que el orden de esta declaración puede ser diferente en diferentes versiones o implementaciones de JavaScript.
3. Mejora de la función AddEvent () de Dean Edward ()
Array.prototype.indexof = function (obj) {var result = -1, longitud = this.length, i = longitud - 1; for (; i> = 0; i--) {if (this [i] == obj) {result = i; romper; }} return resultado;} array.prototype.contains = function (obj) {return (this.indexof (obj)> = 0)} array.prototype.append = function (obj, nodup) {if (! (nodup && this.contains (obj))) {this.length] = obj; }} Array.prototype.remove = function (obj) {var index = this.IndexOf (obj); if (! index) return; devuelve this.splice (índice, 1);}; función addEvent (elemento, type, diversión) {if (! element.events) element.events = {}; var manejadores = element.events [type]; if (! Handlers) {Handlers = element.events [type] = []; if (elemento ['on' + type]) {manejadores [0] = elemento ['on' + type]; }} handlers.append (diversión, true) elemento ['on' + type] = maneEvent;} function RemoLEvent (Element, type, Fun) {if (element.events && element.events [type]) {element.events [type] .remove (diversión); }} function handleEvent (evento) {var returnValue = true, i = 0; evento = evento || FixEvent (Window.Event); Var manejadores = this.events [event.type], longitud = handlers.length; for (; i <longitud; i ++) {if (manejadores [i] .call (this, event) === false) {returnValue = false; }} return returnValue;} función fixEvent (event) {event.preventDefault = fixEvent.preventDefault; event.stoppropagation = fixEvent.stoppropagation; Evento de retorno;} fixEvent.PreventDefault = function () {this.returnValue = false;}; fixEvent.StopPropagation = function () {this.cancelBubble = true;};Esta función es mi mejora en la función AddEvent () de Dean Edward, que cumple completamente con los 5 requisitos iniciales. Espero que sea útil para el aprendizaje de todos. Gracias por tu lectura.