So verwenden Sie Javascript, um benutzerdefinierte Ereignisfunktionen zu implementieren

Übersicht

Benutzerdefinierte Ereignisse sind schwer zu gebrauchen?

Warum es schwierig ist, benutzerdefinierte Ereignisse zu nutzen, weil js in der Vergangenheit nicht modular entwickelt wurde und es wenig Zusammenarbeit gab. Da das Wesentliche eines Ereignisses eine Kommunikationsmethode und eine Nachricht ist, ist es nur dann möglich, Ereignisse für die Kommunikation zu verwenden, wenn mehrere Objekte und mehrere Module vorhanden sind. Mit der Modularisierung können jetzt benutzerdefinierte Ereignisse für die Zusammenarbeit zwischen Modulen verwendet werden.

Wo kann ich benutzerdefinierte Ereignisse verwenden?

Die Essenz eines Ereignisses ist eine Art Nachricht. Das Ereignismuster ist im Wesentlichen die Implementierung des Beobachtermusters. Wenn sich also:

1. Ein Zielobjekt ändert, müssen sich mehrere Beobachter anpassen.

Zum Beispiel: Nachdem ich auf Element A geklickt habe, zeigt Element B die Mausposition an, Element C zeigt eine Eingabeaufforderung an, Element D...

2 Die Zusammenarbeit zwischen Untermodulen muss entkoppelt werden

Zum Beispiel: A ist verantwortlich Für Modul A ist B für Modul B verantwortlich. Modul B muss ausgeführt werden, nachdem A die Ausführung beendet hat. Die traditionelle Schreibweise besteht darin, die Logik in einer Methode zu schreiben:

function doSomething(){
  A();
  B();
}

Auf diese Weise ist die Klickfunktion ein Muss jedes Mal geändert werden, wenn es erweitert wird, was nicht einfach zu erweitern ist.

So schreiben Sie benutzerdefinierte Ereignisse

//1、创建事件
var clickElem = new Event("clickElem");
//2、注册事件监听器
elem.addEventListener("clickElem",function(e){
  //干点事
})
//3、触发事件
elem.dispatchEvent(clickElem);

Sie können sehen, dass Ereignisse, die von elem über die „dispatchEvent“-Methode ausgelöst werden, nur von bei elem registrierten Listenern überwacht werden können. Das ist sehr langweilig. Schicken Sie sich selbst eine Nachricht, um sich selbst zu sagen, was Sie tun sollen.

Um benutzerdefinierte Ereignisse zu erstellen, lesen Sie bitte: MDN: Creating_and_triggering_events

Application

Aus der vorherigen Beschreibung der benutzerdefinierten js-Ereignisse wissen wir, dass nur die auf A registrierten Listener auf Ereignisse hören können, die von Element A über das DispatchEvent ausgelöst werden Verfahren.

Der gewünschte Effekt besteht darin, dass andere Objekte, nachdem sie etwas getan haben, uns eine Nachricht senden, damit wir entsprechende Änderungen vornehmen können. Es gibt keine Möglichkeit, dies zu tun: Wir können Ereignisse auf einem öffentlichen Objekt abhören und auslösen, was Sinn macht.

Beispiel 1: Mehrere Objekte benachrichtigen

Um zu erkennen, dass nach dem Klicken auf Element A Element B die Mausposition und Element C eine Eingabeaufforderung anzeigt, können Sie Folgendes schreiben:

Datei: a.js

import b from "./b"
import c from "./c"
var a = document.getElementById("a");
a.addEventListener("click",function(e){
  var clickA = new Event("clickA");
  document.dispatchEvent(clickA);
});

Hinweis: Die Variablen werden zwar nicht verwendet, dürfen aber nicht weggelassen werden. Datei b.js:

var b = document.getElementById("b");
document.addEventListener("clickA",function(e){
  b.innerHTML = "(128,345)";
})

Datei c.js:

var c = document.getElementById("c");
document.addEventListener("clickA",function(e){
  c.innerHTML = "你点了A";
})

Es ​​besteht kein Grund, sich um die Objekte zu kümmern zwischen den drei Modulen, und sie wissen nicht, dass sie voneinander existieren. Der Grad der Kopplung ist sehr gering und kann völlig unabhängig geschrieben werden, ohne sich gegenseitig zu beeinflussen. Dies ist tatsächlich eine Implementierung des Beobachtermusters.

Beispiel 2: Spiel-Framework

Um ein Spiel zu entwickeln, starten Sie das Spiel, laden Sie Bilder und Musik und rendern Sie nach dem Laden die Szene und die Soundeffekte. Das Laden und Rendern wird von verschiedenen Personen durchgeführt. Sie können es so schreiben: Datei: index.js

import loadImage from "./loadImage"
import loadMusic from "./loadMusic"
import initScene from "./initScene"  
var start = document.getElementById("start");
start.addEventListener("click",function(e){
  console.log("游戏开始！");
  document.dispatchEvent(new Event("gameStart"));
})

Datei: loadImage.js

// 加载图片
document.addEventListener("gameStart",function(){
  console.log("加载图片...");
  setTimeout(function(){
    console.log("加载图片完成");
    document.dispatchEvent(new Event("loadImageSuccess"));
  },1000);
});

Datei: loadMusic.js

//加载音乐
document.addEventListener("gameStart",function(){
  console.log("加载音乐...");
  setTimeout(function(){
    console.log("加载音乐完成");
    document.dispatchEvent(new Event("loadMusicSuccess"));
  },2000);
});

Datei: initScene.js

//渲染场景
document.addEventListener("loadImageSuccess",function(e){
  console.log("使用图片创建场景...");
  setTimeout(function(){
    console.log("创建场景完成");
  },2000)
});
//渲染音效
document.addEventListener("loadMusicSuccess",function(e){
  console.log("使用音乐创建音效...");
  setTimeout(function(){
    console.log("创建音效完成");
  },500)
});

Das Lademodul und das Rendering-Modul tun dies nicht beeinflussen sich gegenseitig und sind leicht erweiterbar.

Informationen übertragen

Darüber hinaus können Ereignisse auch benutzerdefinierte Informationen weitergeben:

var event = new CustomEvent('myEvent', { 'dataName': dataContent });
document.dispatchEvent(event);

(Hinweis: Sie müssen CustomEvent und nicht Event verwenden, um benutzerdefinierte Informationen zu übergeben)

Dann nehmen Sie es in der Hörfunktion heraus:

document.addEventListener("myEvent",function(e){
  console.log(e.dataName);
})

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Javascript, um benutzerdefinierte Ereignisfunktionen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!