javascript - 从 html 调用函数内部的 JavaScript 函数

Question

使用嵌套函数有点困难。问题是，我想从 HTML 调用一个函数，但我所有的 JavaScript 都在里面等待 DOM 加载函数。

如果我从 DOM 加载函数中取出想要调用的函数，我将无法从 DOM 加载函数内部访问变量。

Answer 1

大概当您说“从[您的] HTML 调用函数”时，您的意思是:

<div onclick="yourFunction()">...</div>

...或类似的。

这是不使用 onxyz-attribute-style 事件处理程序的众多原因之一:您只能调用自己的全局函数。

相反，请使用现代事件处理技术连接处理程序，例如 addEventListener (或 attachEvent 如果您需要支持过时的 Microsoft 浏览器；如果您这样做，my answer here 已您可以使用的跨浏览器功能)。如果这样做，您可以使用代码范围内的任何函数来进行连接，它不再需要是全局的。

简单的例子:

(function() {
  // Not global
  function fooClick() {
    console.log(".foo clicked");
  }
  
  // Hook it up
  document.querySelector(".foo").addEventListener("click", fooClick);
})();

<div class="foo">Click me</div>