Comment utiliser javascript pour implémenter des fonctions d'événement personnalisées

Vue d'ensemble

Les événements personnalisés sont difficiles à utiliser ?

Pourquoi il est difficile d'utiliser des événements personnalisés, car js n'était pas développé de manière modulaire dans le passé et il y avait peu de collaboration. Parce que l'essence d'un événement est une méthode de communication et un message, ce n'est que lorsqu'il existe plusieurs objets et plusieurs modules qu'il est possible d'utiliser des événements pour la communication. Désormais, grâce à la modularisation, des événements personnalisés peuvent être utilisés pour collaborer entre les modules.

Où puis-je utiliser des événements personnalisés ?

L'essence d'un événement est une sorte de message. Le modèle d'événement est essentiellement la mise en œuvre du modèle d'observateur. Ainsi, lorsque le modèle d'observateur est utilisé, le modèle d'événement peut également être utilisé. Par conséquent, si :

1. Un objet cible change, plusieurs observateurs doivent s'ajuster.

Par exemple : après avoir cliqué sur l'élément A, l'élément B affiche la position de la souris, l'élément C affiche une invite, l'élément D...

2 La collaboration sous-module doit être découplée

Par exemple : A est responsable. pour le module A, B est responsable du module B. Le module B doit être exécuté une fois que A a fini de s'exécuter. La manière traditionnelle d'écrire est d'écrire la logique dans une méthode :

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

De cette façon, la fonction de clic est indispensable. être modifié à chaque fois qu'il est agrandi, ce qui n'est pas facile à étendre.

Comment écrire des événements personnalisés

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

Vous pouvez voir que les événements déclenchés par elem via la méthode dispatchEvent ne peuvent être surveillés que par les auditeurs enregistrés sur elem. C'est très ennuyeux. Envoyez-vous un message pour vous dire quoi faire.

Pour créer des événements personnalisés, veuillez vous référer à : MDN : Création_et_triggering_events

Application

De la description précédente des événements personnalisés js, nous savons que seuls les auditeurs enregistrés sur A peuvent écouter les événements déclenchés par l'élément A via le dispatchEvent. méthode.

L'effet que nous souhaitons est qu'après que d'autres objets aient fait quelque chose, ils nous envoient un message afin que nous puissions apporter les modifications correspondantes. Il n’y a aucun moyen de faire cela : on peut écouter et déclencher des événements sur un objet public, ce qui est logique.

Exemple 1 : Notifier plusieurs objets

Pour réaliser qu'après avoir cliqué sur l'élément A, l'élément B affiche la position de la souris et l'élément C affiche une invite, vous pouvez écrire comme ceci :

Fichier : 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);
});

Remarque : l'importation arrive Bien que les variables ne soient pas utilisées, elles ne doivent pas être omises

fichier b.js :

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

fichier c.js :

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

est écrit comme ceci. Il n'est pas nécessaire de se soucier des objets. entre les trois modules, et ils ne connaissent pas l'existence les uns des autres. Le degré de couplage est très élevé et peut être écrit de manière totalement indépendante sans s'affecter. Il s'agit en fait d'une implémentation du modèle d'observateur.

Exemple 2 : Cadre de jeu

Pour développer un jeu, démarrez le jeu, chargez les images et la musique, et après le chargement, effectuez le rendu de la scène et des effets sonores. Le chargement et le rendu sont gérés par différentes personnes. Vous pouvez l'écrire comme ceci :

Fichier : 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"));
})

Fichier : loadImage.js

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

Fichier : loadMusic.js

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

Fichier : 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)
});

Le module de chargement et le module de rendu ne le font pas s’influencent mutuellement et sont faciles à développer.

Transporter des informations

De plus, les événements peuvent également transmettre des informations personnalisées :

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

(Remarque : vous devez utiliser CustomEvent, et non Event, pour transmettre des informations personnalisées)

Ensuite, retirez-les dans la fonction d'écoute :

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

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!