Question

为什么logfunc“未定义”？

  var logfunc = function(obj) {
     return function() {
       console.log(obj)
     }
   }

  t += '<a onclick="logfunc(this)">&lt;</a>'

Answer 1

longfunc如果在全球范围之外宣布fiddle

，则无法访问var

我不是主张通过省略function setupStuff() { var logfunc = function(obj) { //defined within setupStuff scope /*...*/ } t += '<a onclick="logfunc(this)"><</a>'; } function setupStuffDifferently() { logfuncB = function(obj) { //defined in the global scope /*...*/ } t += '<a onclick="logfuncB(this)"><</a>'; }直接在全局范围内声明变量，但它是一个很好的例子：

t += '<a onclick="logfunc(this)">&lt;</a>';

function logfunc(obj) { //this would work when assigned through `onclick`
       /*...*/
}

我更愿意看到单独声明的函数，如

{{1}}

如果您可以使用该选项，我建议使用像jQuery这样的库，在assigning and handling click events中提供更大的灵活性。

Answer 2

您收到“logfunc未定义”错误，因为您的logfunc不在全局（即window）范围内，并且使用HTML元素属性绑定的函数必须是全局的。< / p>

你可以说：

window.logfunc = function(obj) {
  return function() {
    console.log(obj)
  }
};

但是，由于logfunc只返回一个调用console.log的函数而<a>不会知道它应该调用function() { console.log(obj) }函数，它只会将其视为真正的价值。我想你想要：

window.logfunc = function(obj) {
  console.log(obj)
};

如果要单击链接以生成控制台消息。

至于“onclick和通过DOM之间的差异”：

通过属性附加的功能必须是全局的，并且很快就会导致纠结的混乱。
您只能使用onclick为每个元素添加一个函数，但您可以根据需要随时调用addEventListener。如果你想将JavaScript代码段粘贴在一起作为字符串，那么你可以解决这个限制。但是这很糟糕。
同样，您可以使用removeEventListener轻松撤消addEventListener来电;从onclick属性中删除事件处理程序涉及甚至比添加一个更糟糕的字符串争论。
使用onclick会不必要地缠绕您的HTML和JavaScript，从而导致维护噩梦。

在HTML中直接设置“onclick”与通过DOM设置是否有区别？

2 个答案: