处理动态生成的 JavaScript 对象的事件答案

【问题标题】：Handling events on dynamically generated JavaScript objects处理动态生成的 JavaScript 对象的事件
【发布时间】：2010-06-18 18:32:46
【问题描述】：

我有一个用 JavaScript 创建的对象。假设它看起来像这样：

function MyObject() {
    this.secretIdea = "My Secret Idea!";
};

MyObject.prototype.load = function() {
    this.MyButton = $(document.createElement("a"));
    this.MyButton.addClass("CoolButtonClass");
    this.MyButton.click = MyButton.onButtonClick;
    someRandomHtmlObject.append(this.MyButton);
};

MyObject.prototype.onButtonClick = function(e) {
    alert(this.secretIdea);
};

如您所见，我在 JavaScript 中设置了一个对象，当它加载时，它会创建一个锚标记。这个锚标记作为 CSS 中的背景图像（所以它不是空的）。

现在，我了解到，当实际单击按钮时，“this”语句将属于 MyButton 元素的范围，而不是我创建的对象。

我尝试过使用 call()、try() 和 bind()，但我无法让它工作。我需要它，以便在单击按钮时返回到对象的范围，而不是 html 元素的范围。

我在这里错过了什么？

【问题讨论】：

标签： javascript object scope

【解决方案1】：

click 事件处理程序中的 this 值指的是 DOM 元素，而不是构造函数的对象实例。

你需要坚持这个值，你也参考MyButton.onButtonClick我想你想参考MyObject.prototype上声明的onButtonClick方法：

MyObject.prototype.load = function() {
    var instance = this;
    //..
    this.MyButton.click(function (e) { // <-- looks like you are using jQuery
      // here `this` refers to `MyButton`
      instance.onButtonClick(e);
    });
    //...
};

【讨论】：