Les déclencheurs d'événements peuvent être bien compris littéralement et sont utilisés pour déclencher des événements, mais certains amis qui ne les ont pas utilisés peuvent être confus. Les événements sont-ils généralement déclenchés par les opérations réelles des utilisateurs sur la page? Cette vue n'est pas complètement correcte, car certains événements doivent être mis en œuvre par des programmes, tels que des événements personnalisés, et certains événements personnalisés du cadre AJAX de JQuery doivent être mis en œuvre par des déclencheurs d'événements. Bien sûr, dans certains cas particuliers, il est plus pratique d'utiliser des déclencheurs d'événements pour déclencher des événements que de déclencher des événements par les opérations réelles de l'utilisateur.
Le navigateur a des méthodes natives pour soutenir la mise en œuvre des déclencheurs d'événements, mais il existe de grandes différences de compatibilité. Ce problème de compatibilité est complètement attendu. IE a ses propres méthodes, et d'autres navigateurs standard ont également un ensemble de méthodes. Sans oublier quelles méthodes sont bonnes ou mauvaises, pour les développeurs Web, c'est une torture pour les développeurs de développer plusieurs méthodes. IE prend en charge la méthode FireEvent pour implémenter le déclenchement des événements, les navigateurs standard prennent en charge DispatchEvent pour implémenter le déclenchement des événements, et les deux prennent en charge IE9. Ce qui suit est le code source de Prototype.js (en fait, je l'ai copié du blog de Situ Zhengmei):
La copie de code est la suivante:
var Fireevent = fonction (élément, événement) {
if (document.createEventObject) {
// IE Le navigateur prend en charge la méthode FireEvent
var evt = document.CreateEventObject ();
return elem.fireevent ('on' + événement, evt)
}
autre{
// D'autres navigateurs standard utilisent la méthode Dispatchvevent
var evt = document.createEvent ('htmlevents');
// inItevent accepte 3 paramètres:
// Type d'événement, s'il bouillonne, qu'il bloque le comportement par défaut du navigateur
evt.initevent (événement, vrai, vrai);
return! element.dispatchEvent (EVT);
}
};
La méthode ci-dessus est compatible avec les navigateurs grand public pour implémenter la fonction des déclencheurs d'événements. Cependant, pour certains systèmes de traitement d'événements encapsulés, tels que le module d'événement de JQuery, il n'est pas si simple et ne peut être mis en œuvre que par simulation. J'ai déjà écrit un système de traitement d'événements très simple et j'ai récemment rencontré le besoin d'événements personnalisés, j'ai donc simulé un déclencheur d'événements basé sur le système d'événements précédent, et le code est le suivant:
La copie de code est la suivante:
/ **
* Déclencheur de l'événement
* @param {Object} Dom Element
* @param {String / Object} Type d'événement / Objet d'événement
* @param {array} Paramètres supplémentaires passés à la fonction du gestionnaire d'événements
* @param {booléen} est-il bouillonnant
* /
Trigger: fonction (elem, événement, données, isstoppropagation) {
var type = event.type || événement,
// élément parent bubble, jusqu'à documenter, fenêtre
parent = elem.parentNode ||
elem.ownerDocument ||
elem === elem.ownerDocument && win,
EventHandler = $ .data (elem, type + 'handler');
isStOPPropagation = typeof data === 'booléen'?
Données: (isStOPPropagation || FAUX);
data = data && isArray (data)? données : [];
// Créer un objet d'événement personnalisé
événement = typeof event === 'objet'?
événement : {
Type: Type,
PARVERDEFAULT: NOOP,
stopPropagation: function () {
isStOPPropagation = true;
}
};
event.target = elem;
data.unshift (événement);
if (eventHandler) {
eventHandler.Call (elem, data);
}
// s'appelle récursivement pour simuler des bulles
if (parent &&! Isstoppropagation) {
data.shift ();
this.trigger (parent, événement, données);
}
}
Le principe de la simulation n'est pas difficile. Lier une fonction de traitement des événements à un certain élément. S'il existe un fonctionnement réel de déclenchement d'un événement, la fonction de traitement des événements correspondante sera exécutée. Par conséquent, pour atteindre la fonction du déclencheur de l'événement, obtenez simplement la fonction de gestion des événements correspondante et exécutez-la. C'est le plus basique.
Lorsque l'événement réel se produit, le navigateur générera un objet d'événement, qui contient certains attributs et informations lorsque l'événement se produit. S'il n'y a pas d'événement réel, il n'y a pas d'objet d'événement, donc le code ci-dessus crée également un objet d'événement pour satisfaire les fonctions les plus fondamentales.
Il y a aussi des événements qui bouillonnent. Si aucun événement réel ne se produit, il n'y aura naturellement pas de comportement de bulle. Ensuite, si vous souhaitez simuler la fonction de bulle, vous devez constamment rechercher l'élément parent et vérifier si le même type d'événement est lié jusqu'au document et à la fenêtre. Si la structure est complexe, les performances de cette méthode d'appel récursive ne sont pas très bonnes.
Enfin, il y a le comportement par défaut du navigateur. Je pense qu'il est assez difficile de simuler cela, si difficile que je ne sais pas comment l'implémenter. Par exemple, le saut par défaut de la balise A. J'ai testé le déclencheur de jQuery, mais il n'a pas été mis en œuvre, mais certains autres comportements semblent être introduits dans le manuel de l'API. Après tout, cette fonction n'est pas très importante, et je n'ai pas encore fait beaucoup de recherches approfondies.