javascript屬性更改事件

每次更新/更改屬性時，爲了使dom元素與模型上的屬性值保持同步（使用john resig的簡單繼承http://ejohn.org/blog/simple-javascript-inheritance/），我需要觸發一個事件。這是可能的以跨瀏覽器的方式嗎？在我看來，如果我可以包裝js用來設置屬性的任何函數，並使它發生事件，它可以工作，我只是不知道如何做到這一點。javascript屬性更改事件

來源

2010-11-12 joshontheweb

JavaScript不使用函數來設置屬性。它們只是變量，並且設置它們不需要任何複雜的包裝。

您可以用一個函數來設置該屬性，雖然 - 同一類你可能在類中支持私有數據的語言使用的getter/setter安排。這樣你的函數可以很容易地運行其他已經註冊爲回調的函數。使用jQuery你甚至可以把它們作爲事件來處理。

$(yourObject).bind('some-event-you-made-up', function() { 
    // This code will run whenever some-event-you-made-up is triggered on yourObject 
}); 

// ... 

$(yourObject).trigger('some-event-you-made-up');

來源

2010-11-12 22:19:06 VoteyDisciple

它實際上是可能的，這對於在對象屬性「getter」和「二傳手」的作用Mozilla擴展的Javascript。 – Pointy 2010-11-12 22:44:38

或在ECMAScript 5中。 – casablanca 2010-11-12 22:53:29

問題是我想監聽事件的對象不是一個jquery對象，而只是一個存儲在jquery對象數據對象中的通用對象。我不知道如何將事件綁定到它。 – joshontheweb 2010-11-12 23:09:22

也許你已經解決了使用jQuery綁定/觸發你的問題，但我想告訴大家，我建立一個更改跟蹤和（在此之上）實體建模的JavaScript框架，命名爲「帳篷」，解決了你曝光，而無需對對象操作，其開源任何特殊語法和託管的問題：

https://github.com/benjamine/tent

它的記錄與JSDoc和單位用JS測試驅動器測試。

您可以使用更改跟蹤模塊是這樣的：

var myobject = { name: 'john', age: 34 }; 

    // add a change handler that shows changes on alert dialogs 
    tent.changes.bind(myobject, function(change) { 
     alert('myobject property '+change.data.propertyName+' changed!'); 
    }); 

    myobject.name = 'charly'; // gets notified on an alert dialog

它與陣也發生了變化（添加，刪除）。此外，您可以使用「實體」上下文來保持所有檢測到的更改（添加，刪除，修改項目）的集合上的變更集，級聯添加和刪除，保持反向屬性同步，跟蹤1對1， N和N對-M的關係，等等。

來源

2011-02-18 02:57:51 Benja

這是一個非常有趣的框架。 – 2013-06-23 19:34:04

你可以嘗試Javascript Property Events (jpe.js)

我遇到過類似的問題，並最終編寫Object.defineProperty，增加了事件處理程序的屬性過載功能。它還提供了類型檢查（js-base-types）並在內部存儲它的值，以防止不必要的更改。

樣品正常defineProperty的：

Object.defineProperty(document, "property", { 
    get:function(){return myProperty}, 
    set:function(value){myProperty = value}, 
}) 
var myProperty = false;

的財產樣品與onchange事件：

Object.defineProperty(document, "property", { 
    default:false, 
    get:function(){}, 
    set:function(value){}, 
    onchange:function(event){console.info(event)} 
})

來源

2016-06-15 08:18:17

我很震驚地在那裏看到一個「onchange」事件，但後來我看到它是一個框架哈哈 – 2017-07-22 04:04:56

對象defineProperty /的DefineProperties的伎倆。這裏有一個簡單的代碼。我已經建立了一些數據，根據該綁定框架，它可以變得很複雜，但行使這樣的：

var oScope = { 
    $privateScope:{}, 
    notify:function(sPropertyPath){ 
     console.log(sPropertyPath,"changed"); 
    } 
}; 
Object.defineProperties(oScope,{ 
    myPropertyA:{ 
     get:function(){ 
      return oScope.$privateScope.myPropertyA 
     }, 
     set:function(oValue){ 
      oScope.$privateScope.myPropertyA = oValue; 
      oScope.notify("myPropertyA"); 
     } 
    } 
}); 

oScope.myPropertyA = "Some Value"; 
//console will log: myPropertyA changed

來源

2017-07-21 19:31:09

javascript屬性更改事件

回答

相關問題