javascript属性更改事件

我需要在每次更新/更改属性时触发事件，以使dom元素与模型上的属性值保持同步（我使用john resig的简单inheritancehttp://ejohn.org/blog/simple-javascript-inheritance/ ）。 这可以通过跨浏览器方式进行吗？ 在我看来，如果我可以包装任何函数js用于设置属性并使其触发事件，它可以工作，我只是不知道如何做到这一点。

Answer 1

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'); 

Answer 2

也许你已经用jQuery绑定/触发器解决了你的问题，但我想告诉我，我正在建立一个变更跟踪和（在其中）实体建模Javascript框架，名为“tent”，解决了你暴露的问题，而不需要对象操作的任何特殊语法，它的开源和托管在：

https://github.com/benjamine/tent

它用JSDoc记录，并使用js-test-driver进行unit testing。

您可以这样使用更改跟踪模块：

  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 

它也适用于Array更改（添加，删除）。 此外，您可以使用“实体”上下文来保留所有检测到的更改（添加，删除，修改项目）的变更集，这些更改按集合，级联添加和删除，保持反向属性同步，跟踪1对1,1到N和N对M的关系等

Answer 3

你可以试试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)} }) 

Answer 4

Object 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