Detaillierte Analyse benutzerdefinierter JavaScript-Ereignisse

Dieser Artikel enthält hauptsächlich eine detaillierte Analyse von benutzerdefinierten JavaScript-Ereignissen, mit denen Benutzer mit Browsern interagieren können. In diesem Fall besteht unsere Codelogik im Allgemeinen darin, vom Benutzer eingegebene Informationen zu sammeln und die Rechtmäßigkeit der Informationen zu überprüfen , und verwenden Sie AJAX. Freunde, die mit dem Server interagieren müssen, können darauf verweisen. Ich hoffe, es kann allen helfen.

Veranstaltung

Das allgemeine technische Niveau ist begrenzt. Wenn es Fehler gibt, korrigieren Sie mich bitte.

Ereignisse sind eine Möglichkeit für Benutzer, mit dem Browser zu interagieren. Wenn ein Benutzer beispielsweise eine Funktion registriert, können wir nach dem Ausfüllen der grundlegenden Informationen auf die Schaltfläche „Senden“ klicken, um die Registrierungsfunktion zu implementieren. Zum Abschließen dieser Funktion ist lediglich ein Klickereignis erforderlich. Wir definieren das Betriebsverhalten vorab und führen unser vorab festgelegtes Verhalten aus, wenn der Benutzer auf die Schaltfläche „Senden“ klickt. In diesem Fall besteht unsere Codelogik im Allgemeinen darin, die vom Benutzer eingegebenen Informationen zu sammeln, die Rechtmäßigkeit der Informationen zu überprüfen und Verwenden Sie AJAX, um mit dem Server zu interagieren.

Dieser Prozess ist genau so, wie wir normalerweise eine Funktion kapseln und dann die Funktion aufrufen. Das Ereignis ähnelt tatsächlich dem Prozess der Funktionsdefinition und des Funktionsaufrufs, mit der Ausnahme, dass der Aufruf der Ereignisfunktion dem Browser mitgeteilt wird durch einige Vorgänge des Benutzers.

Zunächst einmal hat uns der Browser eine Liste von Ereignissen bereitgestellt, einschließlich Klick, Tastendruck usw. Warum müssen wir Ereignisse anpassen? Tatsächlich ist es eine genauere Beschreibung unseres Verhaltens. Am Beispiel der obigen Benutzerregistrierung können wir ein Ereignis mit dem Namen saveMessage definieren. Dieses Ereignis wird ausgelöst, wenn auf die Schaltfläche „Senden“ geklickt wird. Es scheint jedoch nicht anders zu sein als bei einem normalen Funktionsaufruf. Der Unterschied zwischen Aufruf und Ereignisauslösung besteht darin, dass von uns selbst ausgeführte Funktionen Funktionsaufrufe sind und Funktionen, die nicht von uns ausgeführt werden, ereignisausgelöst sind. Schauen Sie sich den folgenden Code an:

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

Wenn wir auf die Schaltfläche klicken, wird aaa gedruckt, und es ist offensichtlich, dass die Funktion nicht von uns aufgerufen wird, aber es ist so Wenn wir die Funktion handler() direkt aufrufen, können wir aaa drucken, aber dies wird von uns aufgerufen, es handelt sich also um einen Funktionsaufruf.

Die Rolle benutzerdefinierter Ereignisse

Benutzerdefinierte Ereignisse sind Funktionen, die wir entsprechend dem Ereignismechanismus des Browsers anpassen. Benutzerdefinierte Ereignisse können zu besseren Erklärungen für unsere Verarbeitungsfunktionen und auch zu besseren Verarbeitungsprozessen für unsere Plug-Ins führen. Angenommen, wir haben eine weitere Anforderung: Rufen Sie einen Datensatz vom Server ab, zeigen Sie ihn als Liste in HTML an und identifizieren Sie dann das erste Datenelement. Wenn wir eine vorhandene Verarbeitungsfunktion verwenden, schreiben wir es möglicherweise so:

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

Dies kann unseren Zweck nicht erreichen, da JS Single-Threaded und AJAX asynchron ist. Wenn der Code $("table").find("input[ When type=' checkbox']:first").prop("checked",true) wird ausgeführt, die von uns benötigten Daten wurden noch nicht abgerufen. Es ist offensichtlich unklug, die interne Implementierung des Plug-Ins zu ändern. Ein akzeptables Plug-In muss über eine angemessene Rückruffunktion (oder ein benutzerdefiniertes Ereignis) verfügen. Wenn es jetzt eine Rückruffunktion gibt, die die Liste erfolgreich zeichnet, können wir dies tun Die Rückruffunktion wird als Ereignis betrachtet. Wir können diesem Ereignis Ereignisoperationen hinzufügen, eine Verarbeitungsfunktion definieren und das Plug-In dann diese Verarbeitungsfunktion ausführen lassen, wenn die Liste erfolgreich gezeichnet wurde.

Benutzerdefinierte Ereignisimplementierung

Wir simulieren die nativen Ereignisse des Browsers, um benutzerdefinierte Ereignisse zu implementieren (en: benutzerdefinierter Ereignisname, fn: Ereignisverarbeitungsfunktion, addEvent: benutzerdefinierte Ereignisse hinzufügen für DOM-Elemente, TriggerEvent: Benutzerdefinierte Ereignisse auslösen):

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;
 }
}

Die von uns ausgeführten Funktionen sind Funktionsaufrufe, und die von uns nicht ausgeführten Funktionen sind Es kann sein Da die Funktion nicht von uns aufgerufen wird, ist es ein Problem, wie der Aufrufer weiß, welche Funktionen aufgerufen werden sollen. Daher müssen einige Einschränkungen zwischen dem Hinzufügen der Ereignisfunktion und dem Auslösen der Ereignisfunktion hinzugefügt werden Von den beiden gibt es einen Ereignispool, auf den jeder zugreifen kann. Fügen Sie das Ereignis und die entsprechende Verarbeitungsfunktion in diesen Pool ein, und gehen Sie zum Pool, um das auszulösende Ereignis zu finden die entsprechende Verarbeitungsfunktion, also Mit dem Code, den wir oben haben.

Es kann viele Verarbeitungsfunktionen für dieselbe Funktion (Ereignis) geben, daher benötigen wir eine Sammlung zum Speichern dieser Verarbeitungsfunktionen. Zu diesem Zeitpunkt sollten wir die beiden Lösungen JSON oder Array widerspiegeln Schlüssel: Wert, für die Verarbeitungsfunktion hat der Name keine Auswirkung, daher verwenden wir ein Array, um zu speichern, welche Funktionen dieser Satz von Funktionen verarbeitet. Daher benötigen wir diesmal auch eine Beschreibung für diesen Satz von Verarbeitungsfunktionen wir brauchen JSON. -->{eventName:[]}.

Verwenden Sie ein vereinfachtes modales BootStrap-Fenster, um die Rolle benutzerdefinierter Ereignisse zu demonstrieren:

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));

Wir können die Ereignisse vor dem Popup vordefinieren Das Fenster erscheint und die Verarbeitungsfunktion nach dem Erscheinen wird ausgeführt, wenn das Popup-Fenster das entsprechende Ereignis auslöst.

Verwandte Empfehlungen:

v-on-Bindung eines benutzerdefinierten Ereignisses in der Vue.js-Komponente

Grundkenntnisse zum Schreiben benutzerdefinierter Ereignisse in JavaScript

Wie um benutzerdefinierte Ereignisse in JavaScript zu erstellen

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse benutzerdefinierter JavaScript-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!