事件处理程序无法访问 JavaScript 中的对象方法

Question

如何从静态 html 事件处理程序访问 util.log() 方法？

换句话说，当我单击复选框时，我喜欢调用 util.log 方法。

onclick="util.log(\'hey\')" <--这里的事件函数怎么重写？

我知道这里所有的答案都是正确的，但是在将 html 插入到 innerHTML 中时是否可以访问本地方法？

谢谢

var utilities = function() {
 var util = this;

 util.log = function(msg){
  alert(msg);
 };

 var p = document.createElement('p');
 p.innerHTML = '<input type="checkbox" onclick="util.log(\'hey\')" value="1">Check me'; 
 // this part has to be plain html, because there is this table generator class 
 // will insert this to cell as innerHTML. That's why I can't change the table class. 
};

Answer 1

您的 util 对象不在全局范围内；它隐藏在 utilities 对象内。点击处理程序将在全局对象的范围内运行，这就是它根本看不到 util 的原因。

如果您无法更改 HTML 字符串的创建方式，那么您需要在 utilities 函数外部声明 util，换句话说，只需在页面中声明 this ：

 var util = {};
 util.log = function(msg){
  alert(msg);
 };

 var p = document.createElement('p');
 p.innerHTML = '<input type="checkbox" onclick="util.log(\'hey\')" value="1">Check me'; // this part is a legacy code and I have no control over to rewrite it as HTMLObjectElement way

Answer 2

试试这个 JavaScript：

var util = {
 log : function(msg){
  alert(msg);
 };
};