直接在HTML中设置“onclick”与通过DOM设置有什么不同？

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)">&lt;</a>'; 
} 

function setupStuffDifferently() { 
    logfuncB = function(obj) { //defined in the global scope 
     /*...*/ 
    } 
    t += '<a onclick="logfuncB(this)">&lt;</a>'; 
} 

我宁愿看到函数另行申报像

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

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

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

Answer 2

由于logfunc不在全局范围（即window）范围内，因此使用HTML元素属性绑定的功能必须是全局性的，因此您会收到“logfunc未定义”错误。

让您可以通过说：

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差异”云：附

1. 功能通过属性必须是全球性的，并迅速导致大的一团乱麻。
2. 您只能使用onclick为每个元素附加一个函数，但您可以根据需要随时调用addEventListener。如果您想将JavaScript片段作为字符串粘贴在一起，那么您可以避开这个限制，但这很糟糕。
3. 同样，您可以使用removeEventListener轻松撤销呼叫addEventListener;从onclick属性中删除事件处理程序涉及到甚至比添加一个更麻烦的字符串争论。
4. 使用onclick不必要地纠结您的HTML和JavaScript，并导致维护噩梦。