Implémentation du déclencheur d'événements javascript introduction_javascript skills

Les déclencheurs d'événements peuvent être bien compris littéralement, ils sont utilisés pour déclencher des événements, mais certains amis qui ne les ont jamais utilisés peuvent être confus. Les événements ne sont généralement pas déclenchés par les opérations réelles de l'utilisateur sur la page. Cette vue n'est pas tout à fait correcte, car certains événements doivent être implémentés par des programmes, tels que les événements personnalisés. Certains événements personnalisés du framework ajax de jQuery doivent être implémentés par des déclencheurs d'événements. Bien entendu, dans certains cas particuliers, il est plus pratique d'utiliser un déclencheur d'événement pour déclencher un événement que l'opération réelle de l'utilisateur pour déclencher l'événement.

Les navigateurs ont des méthodes natives pour prendre en charge les déclencheurs d'événements, mais il existe de grandes différences de compatibilité. Ce problème de compatibilité est tout à fait attendu. IE a ses propres méthodes, et d'autres navigateurs standard ont également un ensemble de méthodes, quelle que soit la méthode qui est bonne. ou mauvais, pour les développeurs WEB, proposer plusieurs ensembles de méthodes est une sorte de torture pour les développeurs. IE prend en charge la méthode fireEvent pour implémenter le déclenchement d'événements, et les navigateurs standard prennent en charge dispatchEvent pour implémenter le déclenchement d'événements. Le double IE9 prend en charge les deux. Voici le code source de prototype.js (en fait, je l'ai copié du blog de Situ Zhengmei) :

Copier le code Le code est le suivant :

var fireEvent = function(element,event) {
if (document.createEventObject){
// Le navigateur IE prend en charge la méthode fireEvent
var evt = document.createEventObject();
return element.fireEvent('on' event,evt)
}
else{
// D'autres navigateurs standards utilisent la méthode dispatchEvent
var evt = document.createEvent( 'HTMLEvents' );
// initEvent accepte 3 paramètres :
// Event tapez , s'il faut faire des bulles, s'il faut empêcher le comportement par défaut du navigateur
evt.initEvent(event, true, true)
return !element.dispatchEvent(evt);
}
};

La méthode ci-dessus est compatible avec les navigateurs grand public pour implémenter des fonctions de déclenchement d'événements. Mais pour certains systèmes de traitement d'événements encapsulés, tels que le module d'événements de jQuery, ce n'est pas si simple et ne peut être implémenté 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énement basé sur le système d'événements précédent :

Copier le code Le code est le suivant :

/**
* Déclencheur d'événement
* @param { Object } Élément DOM
* @param { String / Object } Type d'événement/objet d'événement
* @param { Array } Informations supplémentaires transmises à la fonction de traitement d'événement Paramètre
* @param { Booléen } S'il faut faire des bulles
*/
trigger: function( elem, event, data , isStopPropagation ){
var type = event.type || event,
// Élément parent bullé, jusqu'au document, window
parent = elem.parentNode ||
elem.ownerDocument | |
elem === elem.ownerDocument && win,
eventHandler = $.data( elem, tapez 'Handler' );

isStopPropagation = typeof data === 'boolean' ? > data : (isStopPropagation || false);

data = data && isArray( data ) ? data : [];

// Créer un objet événement personnalisé
event = typeof event === 'objet' ?
événement : {
type : type,
PreventDefault : noop,
stopPropagation : function(){
isStopPropagation = true;
}
};

event.target = elem;
data.unshift( event );
if( eventHandler ){
eventHandler.call( elem, data );
}
// S'appelle récursivement pour simuler un bouillonnement
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
>

Le principe de la simulation n'est pas difficile. Lier une fonction de traitement d'événement à un élément. S'il existe une opération réelle qui déclenche l'événement, la fonction de traitement d'événement correspondante sera donc exécutée pour réaliser la fonction de. le déclencheur d'événement, il vous suffit d'obtenir La fonction de gestion d'événement correspondante est ensuite exécutée, ce qui est la plus basique.

Lorsque l'événement réel se produit, le navigateur génère un objet événement, qui contient certains attributs et informations lorsque l'événement se produit. Si aucun événement réel ne se produit, il n'y aura pas d'objet événement, donc le code ci-dessus crée également un objet événement pour répondre aux fonctions les plus élémentaires.

Il y a aussi un bouillonnement d'événement. Si aucun événement réel ne se produit, il n'y aura naturellement pas de comportement de bouillonnement, donc si vous souhaitez simuler la fonction de bouillonnement, vous devez constamment rechercher l'élément parent et vérifier si le même type est lié. événements jusqu'à ce que le document et la fenêtre soient atteints. Si la structure est complexe, les performances de cette méthode d'appel récursive sont estimées médiocres.

Le dernier est le comportement par défaut du navigateur. Je pense qu'il est assez gênant à simuler. C'est tellement gênant que je ne sais pas comment l'implémenter. Par exemple, le saut par défaut de la balise a. a testé le déclencheur de jQuery et il ne l'a pas implémenté, mais un autre comportement semble être introduit dans le manuel de l'API. Après tout, cette fonction n’est pas très importante, et je n’ai pas encore fait trop de recherches.