javascript - Stackblitz：onClick 找不到我的功能

Question

我在输出警报的按钮中有基本的 onClick

function test(){
  alert('here');
}

<button onClick="test()">Press</button>

在 StackBlitz 这不起作用 - https://stackblitz.com/edit/js-umarwe?embed=1&file=index.js&hideNavigation=1

这是因为 ES6

这在 ES6 中是如何工作的

Answer 1

为什么它不起作用

它不起作用的原因是 Stackblitz 背后有一个资产构建系统，它将您的 Javascript 代码视为模块。

这意味着在这些模块中定义的变量仅在这些模块中可用，并且不会附加到全局命名空间（正如您所期望的并且似乎已经习惯了）。

修复它所需的最低要求

为此，您需要将这些变量显式附加到全局对象，而在浏览器中恰好是window.

只需在 index.js 文件的末尾添加以下行即可使您的代码正常工作：

window.test = test;

更好的方法

请注意，直接在元素上使用内联事件处理程序（如onclick）被认为是不好的做法（并且确实有实际的缺点，但这会导致太过分）。相反，您应该使用 JavascriptsElement.prototype.addEventlistener()函数。到达那里的步骤：

将一个添加id到您的按钮，以便您的 Javascript 可以找到它：

<button id="testButton">Press</button>

接下来，将该元素放入变量中：

var button = document.getElementById('testButton');

最后一步：为事件添加事件监听器click：

button.addEventListener('click', test)

这index.js是重构版本的完整内容：

// Import stylesheets
import './style.css';
function test(){
  alert('here');
}

var button = document.getElementById('testButton');
button.addEventListener('click', test);

如何让它更安全、更好

还有一点需要注意：如果您将加载 Javascript 的脚本标签放在head文档的部分中，您要么需要defer在标签上添加一个属性，要么将需要访问 DOM 的代码部分包装在DOMContentLoaded事件处理程序中：

// Import stylesheets
import './style.css';
function test(){
  alert('here');
}

document.addEventListener('DOMContentLoaded', function () {
  var button = document.getElementById('testButton');
  button.addEventListener('click', test);
}

否则，当您的 Javascript 尝试查找按钮并附加事件侦听器时，浏览器尚未解析 HTML。

Answer 2

修改index.js文件中的测试函数声明：

window.test = function(){
  alert('here');
}

它无法识别单击事件上的测试函数，因为您声明的测试函数不在同一范围内。

Answer 3

你可以这样做。

window.test = () =>{
  alert('here');
}

我不知道stackBlitz ..

但是，我了解加载 index.js

所以window.test = () => {} ...