JavaScriptカスタムイベント_JavaScriptスキルに関する予備調査

また、「イベント機構により、クラスを独立したモジュールとして設計し、イベントを通じて外部と通信できるため、プログラムの開発効率が向上します。」C# プログラマーはイベントの利点を深く理解していると思います。コードは簡単です。コードを見てください:
function class1() { // 最も単純なイベント設計パターン
}
class1.prototype = {
show: function () {
this .onShow();
onShow: function () { }
}
function test() {
var obj = new class1(); = function () {
alert( " test " );
}
obj.show();
}
イベント ハンドラーにパラメータを渡す方法を見てみましょう:
/ / パラメータ化された関数をパラメータのない関数にカプセル化します。
function createFunction(obj, strFunc) {
var args = [] // イベント ハンドラに渡されるパラメータを格納する args を定義します。
if ( ! obj); obj = window; // グローバル関数の場合、obj=window;
// ( var i = 2 ; 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 " ,
obj .show); ();
}

「イベント メカニズムはパラメータ情報を持たずに関数の名前だけを渡すため、パラメータを渡すことはできません。これについては後で説明します。」パラメータを渡す方法を考える代わりに、このプログラムはパラメータ付きのイベント ハンドラに基づいて作成され、カプセル化されます。 "、ここでの "プログラム" は createFunction 関数です。この関数は apply 関数を巧みに使用して、パラメーターを持つ関数をパラメーターなしの関数にカプセル化します。最後に、カスタム イベントのマルチバインディングを実装する方法を見てみましょう:
// カスタム イベントがマルチバインディングをサポートするようにします
// パラメーターを持つ関数をパラメーターのない関数にカプセル化します
function createFunction(obj , strFunc) {
var args = []; // イベント ハンドラーに渡されるパラメータを格納する args を定義します。
if ( ! obj) obj = window; // グローバル関数の場合、obj=window; // イベント ハンドラーに渡されるパラメータを取得します。
for ( var i = 2 ; i // パラメータのない関数を使用します。イベント ハンドラーreturn function () {
obj[strFunc].apply(obj, args) // 指定されたイベント ハンドラー
にパラメータを渡します}
}
function class1(); {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i this .onShow[i](); }
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " userName); >}
function objOnShow2(testName) {
alert( " show: " testName);
function test() {
var obj = new class1() ; userName = " あなたの名前 " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " テストメッセージ " )); >obj.show();
}
attachOnShow メソッドの基本的な考え方は、イベントの実行が完了した後にイベント処理を削除することもできることがわかります。
// パラメータ付きの関数をパラメータなしの関数にカプセル化します。
function createFunction(obj, strFunc) {
var args = []; // ストレージ用の引数を定義し、パラメータを転送します。イベント ハンドラー
if ( ! obj) obj = window; // グローバル関数の場合、obj=window;
// イベント ハンドラー
for ( var i = 2) に渡されるパラメーターを取得します。 ; i // パラメーターのない関数を使用してイベント ハンドラーの呼び出しをカプセル化します。
obj[strFunc] ] .apply(obj, args); // 指定されたイベント ハンドラーにパラメータを渡します
}
}
function class1() { }
class1.prototype = {
show : function () {
if ( this .onShow) {
for ( var i = 0 ; i this .onShow[i](); >}
}
},
attachOnShow: function (_eHandler) { // イベントをアタッチします
if ( ! this .onShow) { this .onShow = [] }
this . .push(_eHandler); },
detachOnShow: function (_eHandler) { // イベントを削除します
if ( ! this .onShow) { this .onShow = [] }
this .onShow .pop(_eHandler);
}
}

function objOnShow(userName) {
alert( " hello, " userName);
function objOnShow2( testName); {
alert( " show: " testName);
function test() {
var obj = new class1();
var userName = " あなたの名前 " ; obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " テスト メッセージ " )); obj.detachOnShow(createFunction( null , " objOnShow " , userName));
obj.show(); // 1 つを削除し、残りの 1 つを表示します
obj.detachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show(); // 両方を削除し、何も表示しません
}
まずここでカスタム イベントについて学びましょう。