如何将内联 onclick 函数编写为 es6 箭头函数？

Question

如果这是重复的让我知道，但我看到类似的问题反应环境但不是纯 html+js。

问题是，我将 js 函数编写为 html onclick 属性并且它正在工作：

<button onclick="function myFunction(){ alert('hi')} myFunction();">Hi</button>

但是我不能像这样将箭头函数写为 html onclick prop：

<button onclick="()=>alert('hi')">Hi</button>

可能还是不可能？

Answer 1

在第一个示例中，您将一个函数分配给myFunction ，然后显式调用myFunction 。

在第二个示例中，您创建了一个函数，但没有在任何地方分配它，也没有调用它。

你可以……

onclick=" const myFunction = ()=>alert('hi'); myFunction() "

……但它和第一个例子一样完全没有意义（并且难以阅读）。

---

没有理由在onclick函数或任何其他函数的范围内创建一个函数，然后立即调用它一次。

---

只需让onclick函数的主体直接执行此操作即可：

onclick="alert('hi')"

更好的是，使用 JavaScript 分配您的事件处理程序：

document.querySelector("button")
    .addEventListener("click", () => alert("hi"));

Answer 2

你必须把它用括号括起来，并像匿名函数一样以这种方式调用它：

<button onclick="(() => alert ('hi'))()">Hi</button>

这正是内联调用匿名常规函数的方式：

<button onclick="(function() { alert ('hi') })()">Hi</button>

这样做的原因是，当前您刚刚声明了一个函数，每次单击时，该函数都已声明但从未调用过。 通过我的答案中的调整，您可以定义它并在每次单击按钮时执行它。

Answer 3

对的，这是可能的。 只需调整括号，实际上您不需要定义另一个函数：

<button onclick="(()=>alert('hi'))();">Hi</button>