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属性。 Live example | 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，“onclick”为attachEvent。）

假设按钮看起来像这样：

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

...并且您的代码在按钮已经放在页面上后运行（例如，您的脚本为at the bottom of the page或运行以响应某些事件）。

现在，每次检查是否使用addEventListener或attachEvent都很痛苦。此外，您可能不希望您需要使用的每个元素都具有id。这是使用良好的JavaScript库，如jQuery，Prototype，YUI，Closure或any of several others非常有用的地方。它们可以为您平滑事件（以及许多其他特性），并提供有用的功能，以便以id以外的方式定位元素（在许多情况下，支持几乎所有CSS样式的选择器，即使在旧的浏览器上也是如此）没有内置querySelector / querySelectorAll。

Answer 3

上述所有答案似乎都使情况过于复杂。

我只是用这个：

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

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

这是按钮：

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

这是一个小提琴，证明了这一点： Fiddle

调用类实例方法onclick javascript

3 个答案: