javascript - 如何将 eventListener 添加到 JavaScript 中的对象，该对象将在操作对象时触发？

Question

我有一个动态操作的复杂 UI 结构，假设我有一个 ui_state 对象，我在其中保存用户的最新 UI 状态，例如哪个选项卡可见，该选项卡内有什么等。

例如:

var ui_states = {
  tabs : [
    {
      name     : "some tab",
      active   : true,
      children : { ... }
    },
    {
      name     : "some other tab",
      children : { ... }
    }
  ]
}

我将它保存在 html5 localStorage 上，当用户刷新网站时，它会重新打开相同的页面。每次 UI 更改时，此对象都会相应更改。在更改它之后我需要运行让我们说 updateLocalStorage()，它运行良好。

我的问题是关于这个流程，我可以为我的 ui_states 对象创建一个自定义事件，比如 ui_states.addEventListener('onchange', function(){//do stuff }) 每次操作对象时不运行 updateLocalStorage() 函数？

Answer 1

您正在混淆 JavaScript 编程和 DOM 编程。事件纯粹是一个 DOM 概念。 JS 对象不支持事件处理程序。

唯一的方法是创建 getter 和 setter。有很多方法可以用 special properties 做到这一点，但不幸的是，浏览器支持可能有点。另一种方法是使用显式方法和私有(private)变量。 This is possible but a little complex.