JavaScriptは、カスタムオブジェクトのカスタマイズを実現します.

前言:
JavaScriptを使用すると、DOMオブジェクトにaddEventListener関数を使用して、一つ以上のイベントリスニング器を高速に結合することができます.
私達はまたどのようにJavaScriptのカスタムオブジェクトの中でこの方法を使って事件を触発しますか?これがこの章の核心内容です.
目的:
今は「a対象」が必要です.「b対象」に一連の動作をさせることができます.
分析して分かりました.まず、「bオブジェクト」の固定名称が入り口としてaオブジェクトに呼び出されます.この入り口は自動的にこの動作要件に該当する関数を検索して、順次トリガします.
実装:
はい、上記の内容を通して、なぜ私達はカスタムイベントが必要なのかを簡単に知ることができます.
これからコードで具体的に実現します.

function CursomObject (table) {
    /// <summary>           </summary>
    /// <param name="table" type="Object" optional="true">          </param>

    //              
    //       ，      Object  
    this._events = {};

    //             
    for (var i in table) this[i] = table[i];
}

上記のコードはCurrsomObjectタイプを定義しています.これは次の操作の基礎となります.

CursomObject.prototype.addEventListener = function (type, listener, capture) {
    /// <summary>       </summary>
    /// <param name="type" type="String">    </param>
    /// <param name="listener" type="Function">     </param>
    /// <param name="capture" type="Boolean" optional="true">         (          )</param>

    //                
    if (typeof type !== "string" || typeof listener !== "function") return this;

    //            
    var list = this._events[type];

    //             ，           
    if (typeof list === "undefined") list = (this._events[type] = []);

    /*           */
    if (!!capture) list.push(listener);
    else list.insert(0, listener);

    return this;
};

これで、簡単なイベントモニターの追加機能が実現されました.
ここで注意したいのですが、list.insertのinsert関数はJavaScriptのArayには存在しません.下の拡張関数の中に見つけます.
なお、return thisは、チェーンプログラミングを容易にするためのものです.「詳細は付録1」を参照してください.

CursomObject.prototype.removeEventListener = function (type, listener, capture) {
    /// <summary>       </summary>
    /// <param name="type" type="String">    </param>
    /// <param name="listener" type="Function">     </param>
    /// <param name="capture" type="Boolean">         </param>

    //                
    if (typeof type !== "string" || typeof listener !== "function") return this;

    //            
    var list = this._events[type];

    //                  
    if (typeof list === "undefined") return this;

    for (var i = 0, len = list.length; i < len; i++) {
        //                           
        if (list[i] == listener) {
            //                  
            list.remove(i);
            break;
        }
    }
    return this;
};

以上の過程は簡単明瞭で、一つの循環で問題を解決します.
これも注意が必要です.JavaScriptの中のArayにはremove関数が存在しないので、同様に下の拡張関数にも現れます.

CursomObject.prototype.fireEvent = function (type, e) {
    /// <summary>    </summary>
    /// <param name="type" type="String">    </param>
    /// <param name="e" type="Object">      </param>

    //    DOM0     ，   
    this["on" + type.toLowerCase()] && this["on" + type.toLowerCase()].call(this, e);

    //            
    var list = this._events[type];

    //                  
    if (!list || list.length <= 0) return this;

    //         
    var isStop = false;

    //       
    window.event = { stopPropagation: function () { isStop = true; } };
    e.stopPropagation = window.event.stopPropagation;

    for (var i = 0, len = list.length; i < len; i++) {
        //                           
        //       false       event.stopPropagation             
        if (list[i].call(this, e) === false || isStop) break;
    }
    return this;
};

注釈はもうはっきり言っています.ここでもう疲れません.
これで本体は完成しました.拡張機能は下に放出されます.

Array.prototype.insert = function (index, value) {
    /// <summary>   </summary>
    /// <param name="index" type="Number">  </param>
    /// <param name="value" type="Object">  </param>
    /// <returns type="Array" />

    if (index > this.length) index = this.length;
    if (index < -this.length) index = 0;
    if (index < 0) index = this.length + index;
    for (var i = this.length; i > index; i--) {
        this[i] = this[i - 1];
    }
    this[index] = value;
    return this;
};

Array.prototype.remove = function (index) {
    /// <summary>   </summary>
    /// <param name="index" type="Number">  </param>
    /// <returns type="Array" />

    if (isNaN(index) || index > this.length) return;
    this.splice(index, 1);
};

はい、全部できました.
下にフルコードを放出します.

function CursomObject(table) {
    /// <summary>           </summary>
    /// <param name="table" type="Object" optional="true">          </param>

    //              
    //       ，      Object  
    this._events = {};

    //             
    for (var i in table) this[i] = table[i];
}

CursomObject.prototype.addEventListener = function (type, listener, capture) {
    /// <summary>       </summary>
    /// <param name="type" type="String">    </param>
    /// <param name="listener" type="Function">     </param>
    /// <param name="capture" type="Boolean" optional="true">         (          )</param>

    //                
    if (typeof type !== "string" || typeof listener !== "function") return;

    //            
    var list = this._events[type];

    //             ，           
    if (typeof list === "undefined") list = (this._events[type] = []);

    /*           */
    if (!!capture) list.push(listener);
    else list.insert(0, listener);

    return this;
};

CursomObject.prototype.removeEventListener = function (type, listener, capture) {
    /// <summary>       </summary>
    /// <param name="type" type="String">    </param>
    /// <param name="listener" type="Function">     </param>
    /// <param name="capture" type="Boolean">         </param>

    //                
    if (typeof type !== "string" || typeof listener !== "function") return this;

    //            
    var list = this._events[type];

    //                  
    if (typeof list === "undefined") return this;

    for (var i = 0, len = list.length; i < len; i++) {
        //                           
        if (list[i] == listener) {
            //                  
            list.remove(i);
            break;
        }
    }
    return this;
};

CursomObject.prototype.fireEvent = function (type, e) {
    /// <summary>    </summary>
    /// <param name="type" type="String">    </param>
    /// <param name="e" type="Object">      </param>

    //    DOM0     ，   
    this["on" + type.toLowerCase()] && this["on" + type.toLowerCase()].call(this, e);

    //            
    var list = this._events[type];

    //                  
    if (!list || list.length <= 0) return this;

    //         
    var isStop = false;

    //       
    window.event = { stopPropagation: function () { isStop = true; } };
    e.stopPropagation = window.event.stopPropagation;

    for (var i = 0, len = list.length; i < len; i++) {
        //                           
        //       false       event.stopPropagation             
        if (list[i].call(this, e) === false || isStop) break;
    }
    return this;
};

Array.prototype.insert = function (index, value) {
    /// <summary>   </summary>
    /// <param name="index" type="Number">  </param>
    /// <param name="value" type="Object">  </param>
    /// <returns type="Array" />

    if (index > this.length) index = this.length;
    if (index < -this.length) index = 0;
    if (index < 0) index = this.length + index;
    for (var i = this.length; i > index; i--) {
        this[i] = this[i - 1];
    }
    this[index] = value;
    return this;
};

Array.prototype.remove = function (index) {
    /// <summary>   </summary>
    /// <param name="index" type="Number">  </param>
    /// <returns type="Array" />

    if (isNaN(index) || index > this.length) return;
    this.splice(index, 1);
};

使用:
上ではカスタムイベントの具体的な実現について詳述しました.
これからは使えますが、どうやって使いますか?

function Test() {
    /// <summary>         </summary>

    //   CursomObject    
    CursomObject.apply(this);
}
//   CursomObject    
Test.prototype = new CursomObject();

//      Test          
var a = new Test();

//     message      
a.addEventListener("message", function (e) {
    alert(e);
}, false);

//      message      
a.addEventListener("message", function (e) {
    alert("  :" + e);
}, false);

//   message  
a.fireEvent("message", "    ……");

これで終わります
質問があればメッセージをください.すぐに返事します.
ご観覧ありがとうございます.