如何從一個java腳本對象中提出一個自定義事件

Question

我想在Java腳本中更好地理解面嚮對象的技術。

我有folowing（平凡）對象。

function CustomObject() { 
    this.size = 1; 
}; 

CustomObject.prototype.addSize = function() { 
    this.size += 1; 
    if(this.size > 5) { 
     //Raise custom Event 
    } 
}; 

我正在這樣安置它。

var myObject = new CustomObject(); 
    myObject.addSize(); 

    // Add listener for custom event from with in my Custom Object. 
    // Something like this.... 
    myObject.addEventListener("CustomEvent", handelCustomEvent, false); 

    function handelCustomEvent() {} 

如何我在自定義對象引發自定義事件，然後聽父的活動？這種事情甚至可以在Java腳本中使用嗎？

Answer 1

您可以通過使您的自定義事件類具有偵聽器和觸發器相關的功能。關於這一點我找到了一個good article。這個類是這樣實現的：

//Copyright (c) 2010 Nicholas C. Zakas. All rights reserved. 
//MIT License 

function EventTarget(){ 
    this._listeners = {}; 
} 

EventTarget.prototype = { 

    constructor: EventTarget, 

    addListener: function(type, listener){ 
     if (typeof this._listeners[type] == "undefined"){ 
      this._listeners[type] = []; 
     } 

     this._listeners[type].push(listener); 
    }, 

    fire: function(event){ 
     if (typeof event == "string"){ 
      event = { type: event }; 
     } 
     if (!event.target){ 
      event.target = this; 
     } 

     if (!event.type){ //falsy 
      throw new Error("Event object missing 'type' property."); 
     } 

     if (this._listeners[event.type] instanceof Array){ 
      var listeners = this._listeners[event.type]; 
      for (var i=0, len=listeners.length; i < len; i++){ 
       listeners[i].call(this, event); 
      } 
     } 
    }, 

    removeListener: function(type, listener){ 
     if (this._listeners[type] instanceof Array){ 
      var listeners = this._listeners[type]; 
      for (var i=0, len=listeners.length; i < len; i++){ 
       if (listeners[i] === listener){ 
        listeners.splice(i, 1); 
        break; 
       } 
      } 
     } 
    } 
}; 

但是，正如作者所言，這個類並不完整。它有一些限制。所以我建議使用jQuery來代替。您可以使用bind()和trigger()函數輕鬆使用自定義事件。對此有一個很好的線索。如果您看到Custom events in jQuery?，您將瞭解如何使用jQuery實現它。

Answer 2

感謝@Sangdol鏈接到自定義事件對象。使用該想法，我想出了以下解決方案

function CustomObject (type, listener) { 
    this.size = 1; 
    this.subscriberType = type; 
    this.subscriberListener = listener; 
}; 

CustomObject.prototype.addSize = function() { 
    this.size += 1; 
    if (this.size > 5) { 
     this.subscriberListener.call(this.subscriberType); 
    } 
}; 

// Test the event 
var myObject = new CustomObject(Document, handelCustomEvent); 

myObject.addSize(); 
myObject.addSize(); 
myObject.addSize(); 
myObject.addSize(); 
myObject.addSize(); 
myObject.addSize(); 
myObject.addSize();  

function handelCustomEvent() { alert("Event"); } 

它不是一個完美的解決方案，但它足以讓我的目的。