この記事では、JavaScriptでのカスタムイベントの使用について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
Webフロントエンド開発では、多くの人がJSカスタムイベントを使用しない場合がありますが、特に複数の人が一緒に開発する場合、比較的大きなプロジェクトを行っている場合、カスタムイベントは非常に重要です。それで、JSのカスタムイベントとは何ですか？まず、例を見てみましょう。
フロントエンド開発者Aが関数をカプセル化します。
次のようにコードをコピーします：function move（）{
アラート（a）; //これはnラインコードを表します
}
しばらくすると、フロントエンド開発者BはAに基づいてこの関数を豊かにするので、彼は次のように書きます。
次のようにコードをコピーします：function move（）{
アラート（a）; //これはnラインコードを表します
アラート（b）; //これはコードのn行を表します
}
問題を発見しましたか？ Bは、変数、関数などの命名および競合の問題に注意を払う必要があります。
次のようにコードをコピーします：function move（）{
アラート（a）; //これはnラインコードを表します
アラート（b）; //これはコードのn行を表します
アラート（c）; //これはコードのn行を表します
}
現時点ではクレイジーであり、Cがコードを書くのは簡単ではないと確信しています。この問題の解決策は、イベントをカスタマイズすることです。次のような要素が互いに影響を与えることなく同じイベントを追加できることがわかっています。
コードコピーは次のとおりです。Window.AddeventListener（ 'click'、function（）{{
アラート（1）;
} 、間違い）;
window.addeventlistener（ 'click'、function（）{
アラート（2）;
} 、間違い）;
ページをクリックすると、1と2がポップアップするため、この方法を使用して関数を定義できます。
コードコピーは次のとおりです。Window.AddeventListener（ 'move'、function（）{
アラート（3）;
} 、間違い）;
window.addeventlistener（ 'move'、function（）{
アラート（4）;
} 、間違い）;
このようにして、move（）;、3と4を実行すると、ポップアップが表示されます。ここでは、Moveはカスタムイベントです。実際には機能です
イベントハンドラーにパラメーターを渡す方法を見てみましょう。
コードを次のようにコピーします。
関数CreateFunction（obj、strfunc）{
var args = []; //イベントハンドラーに渡されたパラメーターを保存するようにargsを定義します
if（！obj）obj = window; //グローバル関数の場合、obj = window;
//イベントハンドラーに渡されたパラメーターを取得します
for（var i = 2; i <arguments.length; i ++）args.push（arguments [i]）;
//パラメーターレス関数でイベントハンドラーの呼び出しを使用します
return function（）{
obj [strfunc] .apply（obj、args）; //パラメーターを指定されたイベントハンドラーに渡します
}
}
function class1（）{
}
class1.prototype = {
show：function（）{
this.onshow（）;
}、
onshow：function（）{}
}
function objonshow（username）{
alert（ "hello" + username）;
}
function test（）{
var obj = new Class1（）;
var username = "test";
obj.onshow = createfunction（null、 "objonshow"、username）;
obj.show（）;
}
「イベントメカニズムは、パラメーター情報なしで関数の名前のみを渡すため、パラメーターを渡すことは不可能です。」これは後の話です。 「この問題を解決するために、パラメーターを渡す方法を検討するのではなく、パラメーターなしでイベントハンドラーを構築する方法を検討するのではなく、反対のアイデアから考慮することができます。プログラムは、パラメーターを持つイベントハンドラーに基づいて作成され、外部カプセル化です。」ここの「プログラム」はCreateFunction関数であり、適用関数を巧みに使用してパラメーターを使用して関数をパラメーターのない関数にカプセル化します。最後に、カスタムイベントにマルチバインディングを実装する方法を見てみましょう。
次のようにコードをコピーします。//複数のバインディングをサポートするカスタムイベントを有効にする
//パラメーターをパラメータなしで関数に含む関数をカプセル化する
関数CreateFunction（obj、strfunc）{
var args = []; //イベントハンドラーに渡されたパラメーターを保存するようにargsを定義します
if（！obj）obj = window; //グローバル関数の場合、obj = window;
//イベントハンドラーに渡されたパラメーターを取得します
for（var i = 2; i <arguments.length; i ++）args.push（arguments [i]）;
//パラメーターレス関数でイベントハンドラーの呼び出しを使用します
return function（）{
obj [strfunc] .apply（obj、args）; //パラメーターを指定されたイベントハンドラーに渡します
}
}
function class1（）{
}
class1.prototype = {
show：function（）{
if（this.onshow）{
for（var i = 0; i <this.onshow.length; i ++）{
this.onshow [i]（）;
}
}
}、
attachonshow：function（_ehandler）{
if（！this.onshow）{this.onshow = []; }
this.onshow.push（_ehandler）;
}
}
function objonshow（username）{
alert（ "hello" + username）;
}
関数objonshow2（testname）{
alert（ "show：" + testname）;
}
function test（）{
var obj = new Class1（）;
var username = "your name";
obj.attachonshow（createfunction（null、 "objonshow"、username））;
obj.attachonshow（createfunction（null、 "objonshow2"、 "test message"））;
obj.show（）;
}
AttachShowメソッドの実装の基本的なアイデアは、配列をプッシュすることであることがわかります。実際、イベントの実行後にイベントハンドラー機能を削除し、以下に個別に実装することもできます。
コードを次のようにコピーします。
関数CreateFunction（obj、strfunc）{
var args = []; //イベントハンドラーに渡されたパラメーターを保存するようにargsを定義します
if（！obj）obj = window; //グローバル関数の場合、obj = window;
//イベントハンドラーに渡されたパラメーターを取得します
for（var i = 2; i <arguments.length; i ++）args.push（arguments [i]）;
//パラメーターレス関数でイベントハンドラーの呼び出しを使用します
return function（）{
obj [strfunc] .apply（obj、args）; //パラメーターを指定されたイベントハンドラーに渡します
}
}
function class1（）{
}
class1.prototype = {
show：function（）{
if（this.onshow）{
for（var i = 0; i <this.onshow.length; i ++）{
this.onshow [i]（）;
}
}
}、
actitsonshow：function（_ehandler）{//追加のイベント
if（！this.onshow）{this.onshow = []; }
this.onshow.push（_ehandler）;
}、
Detachonshow：function（_ehandler）{//イベントを削除します
if（！this.onshow）{this.onshow = []; }
this.onshow.pop（_ehandler）;
}
}
function objonshow（username）{
alert（ "hello" + username）;
}
関数objonshow2（testname）{
alert（ "show：" + testname）;
}
function test（）{
var obj = new Class1（）;
var username = "your name";
obj.attachonshow（createfunction（null、 "objonshow"、username））;
obj.attachonshow（createfunction（null、 "objonshow2"、 "test message"））;
obj.show（）;
obj.detachonshow（createfunction（null、 "objonshow"、username））;
obj.show（）; // 1つを削除し、残りのものを表示します
obj.detachonshow（createfunction（null、 "objonshow2"、 "test message"））;
obj.show（）; //両方が削除され、表示されないものはありません
}
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。