如何將內聯 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>