调用类实例方法onclick javascript

Call class instance method onclick javascript

本文关键字：javascript onclick 实例方法 调用      更新时间：2023-09-26

我有一个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>

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

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/

假设代码在全局范围内，您的代码工作得很好，只是在加载页面后不能使用document.write。因此：

function MyClass()
{
    this.instanceData = "Display Me";
    this.DisplayData = function()
    {
        alert(this.instanceData); // <=== only change here
    }
}
var classInstance = new MyClass();

与onclick属性配合良好。实例|源

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

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

在页面中添加一段包含"你好"的内容。

但是，我敦促您不要使用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、Prototype、YUI、Closure或其他任何库）的有用之处。它们为您平滑了事件内容（以及许多其他特性），并为以id以外的方式定位元素提供了有用的功能（在许多情况下，支持几乎所有的CSS样式选择器，即使在没有内置querySelector/querySelectorAll的旧浏览器上也是如此。

上面的所有答案似乎都让情况稍微复杂了一点。

我只是用这个：

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

这是按钮：

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

这里有一把小提琴来证明这一点：Fiddle

相关文章：