调用类实例方法onclick javascript

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

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>

哪一个不起作用，但帮助我澄清我在找什么。有什么建议么？

来源

2012-02-16 James Woods

如果你想这样做的权利，避免造成一片混乱，不使用内联事件处理程序（'onclick'和朋友）。他们只是不属于你的HTML。了解'addEventListener（）'，你的代码将变得更清洁和易于管理。 – kapa 2012-02-17 08:55:43

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/

来源

2012-02-16 20:31:32 sankargorthi

声明不带var关键字的classInstance不起作用。除非你在谈论使用全局函数来显示文本，我不想这么做。它必须来自一个类实例，所以当项目规模扩大时，该项目仍然可以轻松管理。 – 2012-02-16 22:21:52

在这种情况下，您可能需要查看使用JavaScript库来帮助您通过查询dom并从类中分配行为来附加事件。您编写的代码块对于在JavaScript中玩游戏很合适，但将行为逻辑从布局（MVC）中分离出来是一种很好的做法。因此，如果您要将jQuery用作库，那么您需要为要被点击的元素添加一个类，并使用

$('.myClass').click(function() { alert('hello');});

– sankargorthi 2012-02-16 22:55:55

来查询它。此答案有多个问题：1.您主张依靠* [The Horror of隐式全局]（http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html）*，这总是一个坏主意。如果你想创建一个全局的，明确*（'window.classInstance = ...'）。 2.绝对没有理由使用'classInstance.DisplayData.call（classInstance）';它**完全**与'classInstance.DisplayData（）'相同。 3.它没有解决OP的代码使用'document.write'这一事实，这在页面加载后不会工作（他们希望的方式）。 – 2012-02-17 09:08:16

你的代码工作得很好假设它在全球范围内，除了页面加载后，您不能使用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，“点击”与attachEvent）

那假设按钮看起来像这样：

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

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

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

来源

2012-02-17 08:58:52

-1

所有的答案上面似乎过于复杂的情况有点

我只是用这个：。

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

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

这里是按钮：

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

这里是说明了这一点小提琴： Fiddle

来源

2015-07-06 13:50:00 Ziki

该问题询问有关类，而不是与js函数。 – Jersh 2017-08-14 15:16:23

调用类实例方法onclick javascript

回答

相关问题