JavaScript を使用してカスタム イベント関数を実装する方法

概要

カスタム イベントは使いにくいですか?

カスタム イベントが役に立ちにくいのは、これまで JS がモジュール形式で開発されておらず、コラボレーションがほとんどなかったためです。イベントの本質は通信手段とメッセージであるため、複数のオブジェクトや複数のモジュールが存在する場合にのみ、イベントを通信に使用することができます。モジュール化により、カスタム イベントを使用してモジュール間で連携できるようになりました。

カスタム イベントはどこで使用できますか?

イベントの本質は一種のメッセージです。イベント パターンは本質的にオブザーバー パターンの実装です。したがって、オブザーバー パターンが使用される場合は、イベント パターンも使用できます。したがって、次の場合:

1. ターゲット オブジェクトが変化すると、複数の観察者が調整する必要があります。

例: 要素 A をクリックすると、要素 B にはマウスの位置が表示され、要素 C にはプロンプトが表示され、要素 D...

2. モジュールのコラボレーションを分離する必要があります

例: A はモジュール A を担当し、B はモジュール B を担当します。モジュール B は、A の実行が終了した後に実行する必要があります。

従来の記述方法は、ロジックを次のように記述することです。 a メソッド:

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

このように、a のクリック機能は展開するたびに変更する必要があり、展開が容易ではありません。

カスタム イベントの作成方法

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

ご覧のとおり、dispatchEvent メソッドを通じて elem によってトリガーされたイベントは、elem に登録されたリスナーによってのみリッスンできます。これはとても退屈です。自分に何をすべきかを伝えるメッセージを自分に送ってください。

カスタム イベントを作成するには、次を参照してください: MDN: Create_and_triggering_events

Application

前の JS カスタム イベントの説明からわかります: 要素A は、dispatchEvent を渡します。 メソッドによってトリガーされたイベントは、A に登録されたリスナーによってのみリッスンできます。

私たちが望む効果は、他のオブジェクトが何かを行った後、対応する変更を加えることができるように、それらのオブジェクトが私たちにメッセージを送信することです。これを行う方法はありません。パブリック オブジェクトでイベントをリッスンしてトリガーすることができますが、これは理にかなっています。

例 1: 複数のオブジェクトに通知する

要素 A がクリックされた後、要素 B にマウスの位置が表示され、要素 C にプロンプ​​トが表示されることを理解するには、次のようにします。

ファイル: 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);
});

注: インポートされた変数は使用されませんが、省略してはなりません

File b.js:

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

File c .js:

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

このように書くと、3 つのモジュールはオブジェクトをまったく意識する必要がなく、お互いの存在を知りません。結合は非常に低く、相互に影響を与えることなく独立して書き込むことができます。これは実際にはオブザーバー パターンの実装です。

例 2: ゲーム フレームワーク

ゲームを開発するには、ゲームを開始し、画像と音楽を読み込み、読み込み後にシーンと効果音をレンダリングします。レンダリングは別の担当者が担当します。次のように記述できます:

ファイル: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"));
})

ファイル:loadImage.js

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

ファイル:loadMusic.js

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

ファイル: 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)
});

ローディングモジュールとレンダリングモジュールは相互に影響を与えず、拡張が容易です。

情報の伝達

さらに、イベントはカスタム情報を渡すこともできます:

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

(注: CustomEvent は、カスタム情報を渡すために必要です。イベント)

それからリスニング関数で取り出します:

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

以上がJavaScript を使用してカスタム イベント関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。