直接在 HTML 中设置“onclick”与通过 DOM 设置“onclick”之间有区别吗?

Is there a difference between setting "onclick" directly in HTML vs. via the DOM?

本文关键字：onclick 设置 之间 DOM 有区别 HTML      更新时间：2023-09-26

为什么logfunc"未定义"？

  var logfunc = function(obj) {
     return function() {
       console.log(obj)
     }
   }
  t += '<a onclick="logfunc(this)">&lt;</a>'
如果将longfunc声明在

全局范围之外，则无法访问对它的引用，小提琴

我不提倡通过省略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这样的库，它在分配和处理点击事件方面提供了更大的灵活性。

您收到"logfunc 未定义"错误，因为您的logfunc不在全局中（即 window ） 使用 HTML 元素属性绑定的作用域和函数必须是全局的。

你可以通过说来解决这个问题：

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，从而导致维护噩梦。
相关文章：