Analyse détaillée des événements personnalisés JavaScript

Cet article partage principalement avec vous une analyse détaillée des événements personnalisés JavaScript. Les événements sont un moyen pour les utilisateurs d'interagir avec les navigateurs. Dans ce cas, notre logique de code consiste généralement à collecter des informations remplies par l'utilisateur et à vérifier la légalité des informations. , et utilisez AJAX. Les amis qui ont besoin d'interagir avec le serveur peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Événement

Le niveau technique général est limité S'il y a des erreurs, merci de me corriger.

Les événements sont un moyen pour les utilisateurs d'interagir avec le navigateur. Par exemple, si un utilisateur enregistre une fonction, après avoir rempli les informations de base, nous pouvons cliquer sur le bouton Soumettre pour implémenter la fonction d'enregistrement. Tout ce qui est nécessaire pour compléter cette fonction est un événement de clic. Nous définissons le comportement de fonctionnement à l'avance et exécutons notre comportement prédéterminé lorsque l'utilisateur clique sur le bouton de soumission. Dans ce cas, notre logique de code consiste généralement à collecter les informations renseignées par l'utilisateur, à vérifier la légalité des informations et à utiliser AJAX. pour interagir avec le serveur.

Ce processus est comme nous encapsulons habituellement une fonction puis appelons la fonction. L'événement est en fait similaire au processus de définition de fonction et d'appel de fonction, sauf que l'appel de la fonction événement est notifié au navigateur. par certaines opérations de l'utilisateur. Laissez le navigateur appeler la fonction.

Tout d'abord, le navigateur nous a fourni une liste d'événements, notamment le clic, la touche enfoncée, etc. Pourquoi avons-nous besoin de personnaliser les événements ? En fait, il s’agit d’une description plus précise de notre comportement. En prenant l'enregistrement de l'utilisateur ci-dessus comme exemple, nous pouvons définir un événement nommé saveMessage. Cet événement est déclenché lorsque vous cliquez sur le bouton de soumission. Cela semble plus intuitif, mais cela ne semble pas différent d'un appel de fonction ordinaire. La différence entre l'appel et le déclenchement d'événements est que les fonctions exécutées par nous-mêmes sont des appels de fonction, et les fonctions qui ne sont pas exécutées par nous sont déclenchées par des événements. Regardez le code suivant :

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.onclick = handler;
 function handler(){
  console.log("aaa");
 }
}

Quand on clique sur le bouton, aaa sera imprimé, et il est évident que la fonction n'est pas appelée par nous mais c'est exécuté par le navigateur. Si nous appelons directement la fonction handler(), nous pouvons imprimer aaa, mais c'est nous qui l'appelons, c'est donc un appel de fonction.

Le rôle des événements personnalisés

Les événements personnalisés sont des fonctions que nous personnalisons en fonction du mécanisme événementiel du navigateur. Les événements personnalisés peuvent apporter de meilleures explications à nos fonctions de traitement, et peuvent également apporter de meilleurs processus de traitement à nos plug-ins. Supposons que nous ayons une autre exigence : extraire un ensemble de données du serveur et l'afficher sous forme de liste en HTML, puis identifier le premier élément de données. Si nous utilisons une fonction de traitement existante, nous pouvons l'écrire comme ceci :

.

dataTable("url");
$("table").find("input[type='checkbox']:first").prop("checked",true);

Cela ne peut pas atteindre notre objectif car JS est monothread et AJAX est asynchrone Lorsque le code $("table").find("input[ When type='. checkbox']:first").prop("checked",true) est exécuté, les données dont nous avons besoin n'ont pas encore été obtenues. Il n'est évidemment pas judicieux pour nous de modifier l'implémentation interne du plug-in. Un plug-in acceptable doit avoir une fonction de rappel raisonnable (ou un événement personnalisé). S'il existe maintenant une fonction de rappel qui réussit à dessiner la liste, nous pouvons le faire. La fonction de rappel est considérée comme un événement.Nous pouvons ajouter des opérations événementielles à cet événement, définir une fonction de traitement, puis laisser le plug-in exécuter cette fonction de traitement lorsque la liste est dessinée avec succès.

Implémentation d'événements personnalisés

Nous simulons les événements natifs du navigateur pour implémenter des événements personnalisés (en : nom d'événement personnalisé, fn : fonction de traitement d'événements, addEvent : ajouter des événements personnalisés pour Éléments DOM, triggerEvent : déclencher des événements personnalisés) :

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.addEvent("test",function(){console.log("handler1")});
 demo.addEvent("test",function(){console.log("handler2")});
 demo.onclick = function(){
  this.triggerEvent("test");
 }
}
Element.prototype.addEvent = function(en,fn){
 this.pools = this.pools || {};
 if(en in this.pools){
  this.pools[en].push(fn);
 }else{
  this.pools[en] = [];
  this.pools[en].push(fn);
 }
}
Element.prototype.triggerEvent = function(en){
 if(en in this.pools){
  var fns = this.pools[en];
  for(var i=0,il=fns.length;i<il;i++){
   fns[i]();
  }
 }else{
  return;
 }
}

Les fonctions exécutées par nous-mêmes sont des appels de fonction, et les fonctions qui ne sont pas exécutées par nous sont des appels de fonction. Cela peut être appelé un événement déclencheur. Puisque la fonction n'est pas appelée par nous, comment l'appelant sait-il quelles fonctions appeler est un problème, il est donc nécessaire d'ajouter quelques contraintes entre l'ajout de la fonction événement et le déclenchement de la fonction événement, cela c'est-à-dire l'un des deux. Il existe un pool d'événements auquel tout le monde peut accéder. Lors de l'ajout d'un événement, placez l'événement et la fonction de traitement correspondante dans ce pool. Lorsque les conditions de déclenchement sont remplies, accédez au pool pour rechercher l'événement. déclenché et exécute la fonction de traitement correspondante, donc avec le morceau de code que nous avons ci-dessus.

Il peut y avoir plusieurs fonctions de traitement pour la même fonction (événement), nous avons donc besoin d'une collection pour stocker ces fonctions de traitement. À ce stade, nous devons refléter les deux solutions JSON ou tableau. key :value, pour la fonction de traitement, le nom n'a aucun effet, nous utilisons donc un tableau pour enregistrer la fonction de traitement. Quelles fonctions cet ensemble de fonctions gère-t-il, nous avons donc également besoin d'une description pour cet ensemble de fonctions de traitement. nous avons besoin de JSON -->{eventName:[]}.

Utilisez une fenêtre modale BootStrap simplifiée pour démontrer le rôle des événements personnalisés :

window.onload = function(){
 var show = document.getElementById("show");
 var hide = document.getElementById("hide");
 var content = document.getElementById("content");
 show.onclick = function(){
  content.modal("show");
 }
 hide.onclick = function(){
  content.modal("hide");
 }
 content.addEvent("show",function(){alert("show before")});
 content.addEvent("shown",function(){
  document.getElementById("input").focus();
  alert("show after");
 }); 
}
;(function(ep){
 ep.addEvent = function(en,fn){
  this.pools = this.pools || {};
  if(en in this.pools){
   this.pools[en].push(fn);
  }else{
   this.pools[en] = [];
   this.pools[en].push(fn);
  }
 }
 ep.triggerEvent = function(en){
  if(en in this.pools){
   var fns = this.pools[en];
   for(var i=0,il=fns.length;i<il;i++){
    fns[i]();
   }
  }else{
   return;
  }
 }
 ep.modal = function(t){
  switch(t){
   case "show":
    this.triggerEvent("show");
    this.style.display = "block";
    setTimeout(function(){this.triggerEvent("shown")}.bind(this),0);//该定时器主要是为了在视觉上先看见content,在弹出消息
    break;
   case "hide":
    this.style.display = "none";
    break;
   default:
    break;
  }
 }

}(Element.prototype));

Nous pouvons prédéfinir les événements avant le pop-up La fenêtre contextuelle apparaît et la fonction de traitement après son apparition sera exécutée lorsque la fenêtre contextuelle déclenchera l'événement correspondant.

Recommandations associées :

Événement personnalisé de liaison v-on dans le composant Vue.js

Connaissance de base de l'écriture d'événements personnalisés en JavaScript

Comment pour créer des événements personnalisés en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!