javascript - 如何监听对象内部的事件？

Question

我正在尝试监听点击事件并相应地给出输出。

但是，我对在对象中添加事件有点困惑。

我试过了。

var object1 = {
    getVariables: {
        button1: document.getElementById('button');
    },
    eventHandler: {
        getVariables.button1.addEventListener('click', this.alertSomething);
    },
    alertSomething: function() {
        alert('Cool');
    }
};

这是监听事件的正确方式吗？如果不对，请帮我改正。

Answer 1

您必须将对变量的引用保存在对象中的某处 - 为了使对象引用自身来实现这一点，它必须以某种方式使用 this。 (好吧，你也可以将整个对象作为一个单独的参数传入，但这有点奇怪而且不经常这样做)

这有点棘手，因为在调用 object1.getVariables.button1 时，this 的上下文是 getVariables 属性引用的对象，但是您可能希望将信息放在 object1 本身中更合适的地方，而不是 getVariables 中。让我们将变量存储在 storedVariables 属性中。

我们希望调用函数时引用外部对象，而不是 getVariables 或 addEventHandler 属性，因此我们必须使用 call 将自定义 this 传递给函数:

const button = document.getElementById('button');
const object1 = {
  storedVariables: {},
  getVariables: {
    button1: function() { this.storedVariables.button1 = document.getElementById('button') },
  },
  addEventHandler: {
    button1: function() { this.storedVariables.button1.addEventListener('click', this.alertSomething); },
  },
  alertSomething: function() {
    alert('Cool');
  }
};

object1.getVariables.button1.call(object1);
object1.addEventHandler.button1.call(object1);

<div id="button">
some button
</div>

如果 object1 上直接有一个方法，例如 getButton1(addEventHandler 也一样)，那会明显不那么复杂，即无需自定义 this 即可正常调用它们的方式。