Los desencadenantes de eventos pueden entenderse bien literalmente, y se usan para desencadenar eventos, pero algunos amigos que no los han usado pueden confundirse. ¿Los eventos generalmente se activan por las operaciones reales de los usuarios en la página? Esta opinión no es completamente correcta, porque algunos eventos deben ser implementados por programas, como eventos personalizados, y algunos eventos personalizados del marco AJAX de JQuery deben ser implementados por desencadenantes de eventos. Por supuesto, en algunos casos especiales, es más conveniente usar los desencadenantes de eventos para activar eventos que para activar los eventos por las operaciones reales del usuario.
El navegador tiene métodos nativos para apoyar la implementación de los desencadenantes de eventos, pero existen grandes diferencias en la compatibilidad. Este problema de compatibilidad es completamente esperado. IE tiene sus propios métodos, y otros navegadores estándar también tienen un conjunto de métodos. Sin mencionar cuyos métodos son buenos o malos, para los desarrolladores web, es una tortura para que los desarrolladores desarrollen varios métodos. IE admite el método FireEvent para implementar la activación de eventos, los navegadores estándar admiten DispatchEvent para implementar la activación de eventos y ambos admiten IE9. El siguiente es el código fuente de Prototype.js (en realidad lo copié desde el blog de Situ Zhengmei):
La copia del código es la siguiente:
var fireEvent = function (elemento, evento) {
if (document.createeVeVeObject) {
// es decir, el navegador admite el método FireEvent
var evt = document.createEventObject ();
return element.fireEtevent ('on'+evento, EVT)
}
demás{
// Otros navegadores estándar usan el método DispathEvent
var evt = document.createEvent ('htmlevents');
// InitedEvent acepta 3 parámetros:
// Tipo de evento, ya sea burbujeante, ya sea bloqueando el comportamiento predeterminado del navegador
evt.initevent (evento, verdadero, verdadero);
return! Element.dispatchEvent (EVT);
}
};
El método anterior es compatible con los navegadores convencionales para implementar la función de los desencadenantes de eventos. Sin embargo, para algunos sistemas de procesamiento de eventos encapsulados, como el módulo de eventos de jQuery, no es tan simple y solo se puede implementar a través de la simulación. Escribí un sistema de procesamiento de eventos muy simple antes, y recientemente encontré la necesidad de eventos personalizados, por lo que simulé un disparador de eventos basado en el sistema de eventos anterior, y el código es el siguiente:
La copia del código es la siguiente:
/**
* Disparador de eventos
* @param {objeto} elemento DOM
* @param {String / Object} Tipo de evento / Objeto de evento
* @param {array} parámetros adicionales pasados a la función del controlador de eventos
* @param {boolean} ¿está burbujeando?
*/
Trigger: function (Elem, Event, Data, IsStopPropagation) {
VAR Type = Event.Type || evento,
// Elemento principal de burbujas, todo el camino al documento, ventana
parent = elem.parentnode ||
Elem.OwnerDocument ||
Elem === Elem.OwnerDocument && Win,
eventHandler = $ .data (elem, type + 'handler');
iSStopPropagation = typeof data === 'Boolean'?
Datos: (ISStopPropagation || False);
data = data && isArray (datos)? datos : [];
// crear un objeto de evento personalizado
evento = typeof Event === 'Object'?
evento : {
Tipo: Tipo,
PreventDefault: NOOP,
stopPropagation: function () {
isStopPropagation = true;
}
};
event.target = elem;
data.unshift (evento);
if (eventHandler) {
eventHandler.call (Elem, datos);
}
// llamarse recursivamente para simular burbujas
if (parent &&! isstoppropagation) {
data.hift ();
this.rigger (padre, evento, datos);
}
}
El principio de simulación no es difícil. Ate una función de manejo de eventos a un determinado elemento. Si hay una operación real de activar un evento, se ejecutará la función de manejo de eventos correspondiente. Por lo tanto, para lograr la función del activador del evento, simplemente obtenga la función de manejo de eventos correspondiente y ejecutela. Este es el más básico.
Cuando ocurre el evento real, el navegador generará un objeto de evento, que contiene algunos atributos e información cuando ocurra el evento. Si no hay evento real, no hay objeto de evento, por lo que el código anterior también crea un objeto de evento para satisfacer las funciones más básicas.
También hay eventos que burbujean. Si no ocurren eventos reales, naturalmente no habrá comportamiento de burbujas. Luego, si desea simular la función de burbuja, debe buscar constantemente el elemento principal y verificar si el mismo tipo de evento está vinculado hasta que el documento y la ventana. Si la estructura es compleja, se estima que el rendimiento de este método de llamada recursiva no es muy bueno.
Finalmente, existe el comportamiento predeterminado del navegador. Creo que es bastante problemático simular esto, tan problemático que no sé cómo implementarlo. Por ejemplo, el salto predeterminado de la etiqueta A. Probé el desencadenante de jQuery, pero no se implementó, pero algunos otros comportamientos parecen introducirse en el manual de API. Después de todo, esta función no es muy importante, y aún no he hecho una investigación en profundidad.