概要
カスタム イベントは使いにくいですか?
カスタム イベントが役に立ちにくいのは、これまで 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 サイトの他の関連記事を参照してください。