调用类实例方法 onclick javascript

Question

我有一个 javascript 文件，其中包含包含方法函数的类。我想知道如何从 onClick 事件调用类实例方法。

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        document.write(this.instanceData);
    }
}

var classInstance = new MyClass();

我如何从 onClick 事件调用 classInstance 上的 DisplayData 函数。例如：

<button onClick="classInstance.DisplayData()">Click Me!</button>

这不起作用，但可以帮助我澄清我想要做什么。有什么建议吗？

Answer 1

http://jsfiddle.net/EyMCQ/1/

正如您所注意到的，这不起作用，因为您声明的 var 保留在执行块的范围内。如果删除 var，它就会起作用，因为 classInstance 现在位于全局范围内。

function MyClass() {
    this.instanceData = "Display Me";

    this.DisplayData = function() {
        alert(this.instanceData);
    }
}

classInstance = new MyClass();​

并这样称呼它：

<button onClick="classInstance.DisplayData.call(classInstance)">Click Me!</button>​

http://jsfiddle.net/EyMCQ/2/

Answer 2

假设您的代码在全局范围内，则可以正常工作，但在加载页面后无法使用 document.write 。所以：

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        alert(this.instanceData); // <=== only change here
    }
}

var classInstance = new MyClass();

...与您的 onclick 属性配合得很好。 实例 | source

document.write 主要用于期间页面加载。如果您在页面加载后调用它，则意味着 document.open 会清除当前文档并用您编写的内容替换。如果您想在页面加载后附加到页面，请使用 createElement 和 appendChild，通过innerHTML。例如：

var p = document.createElement('p');
p.innerHTML = "Hi there";
document.body.appendChild(p);

...将包含“Hi There”的段落附加到页面。

但是，我强烈建议您不要使用 onclick 属性等，尤其是因为它们需要访问全局变量和函数，并且我主张避免将全局变量和函数用于尽你所能（并且你几乎可以完全避免它们）。相反，使用连接事件处理程序的现代方法： addEventListener 和（支持 IE8 及更早版本）attachEvent< /代码>。

因此，更改您的示例，使其不会创建任何全局变量：（

(function() {
    function MyClass()
    {
        this.instanceData = "Display Me";

        this.DisplayData = function()
        {
            alert(this.instanceData);
        }
    }

    var classInstance = new MyClass();

    // ...and hook it up
    var button = document.getElementById("theButton");
    if (button.addEventListener) {
        button.addEventListener('click', function() {
            classInstance.DisplayData();
        }, false);
    }
    else if (button.attachEvent) {
        button.attachEvent('onclick', function() {
            classInstance.DisplayData();
        });
    }
    else {
        // Very old browser, complain
    }
})();

事件名称是带有 addEventListener 的“click”，带有 attachEvent 的“onclick”。）

请注意， 按钮看起来像这样：

<button id="theButton">Click Me!</button>

...并且您的代码在按钮已经放在页面上之后运行（例如，您的脚本是 位于页面底部或响应某些事件而运行）。

现在，每次都检查是否使用 addEventListener 还是 attachEvent 很痛苦。另外，您可能不希望需要使用的每个元素都有一个 id。这是使用良好的 JavaScript 库的地方，例如 jQuery、原型，YUI，闭包，或其他任何一个都是有用的。它们为您平滑了事件内容（以及许多其他特性），并提供了有用的功能，可以通过 id 以外的方式定位元素（在许多情况下，支持几乎所有 CSS 样式选择器，甚至在没有 querySelector / 的旧版浏览器<一href="http://www.w3.org/TR/selectors-api/#queryselectorall" rel="nofollow">querySelectorAll 内置。

Answer 3

上面所有的答案似乎都让情况变得有点复杂。

我只是使用这个：

MyClass = new function() {
    this.instanceData = "Display Me";

    this.DisplayData = function() {
        alert(this.instanceData);
    };
};

这是按钮：

<button onClick="MyClass.DisplayData()">Click Me!</button>

这是一个演示这一点的小提琴：
小提琴