“ onclick”事件會自動觸發

Question

我有這段代碼具有onclick處理程序和IIFE 。

var btn = document.getElementById("btn");
btn.onclick = function clickHandler(){console.log("Button clicked"); } 

//btn.onclick = function clickHandler(){console.log("Now clicked"); };

(function(){
    console.log("Hello");
})();

問題是clickHandler在頁面加載后自動被調用 ， 並且IIFE沒有被調用 。 但是，在注釋掉第2行和取消注釋第3行（上述代碼中的注釋掉的行）時，該代碼將按預期工作。

這兩行之間的唯一區別是第二行沒有； 最后，但是第三行。

另外，如果我刪除IIFE並保持其余代碼不變，則代碼可以正常工作。

演示： https : //codepen.io/anon/pen/Pezpqv

Answer 1

這很棘手。 因為在代碼的第二行中缺少分號，所以解析器不會在那里停下來，而是會消耗所有可能的令牌。 最后，代碼被解析為...

btn.onclick = function clickHandler() {
  console.log("Button clicked");
}(
  //btn.onclick = function clickHandler(){console.log("Now clicked"); };

  function() {
    console.log("Hello");
  }
)
();

請參見difference () make-您的函數表達式將立即被調用。 有趣的是...

function() { console.log('Hello') }

...被視為其參數值-仍然會被忽略。

之后，嘗試將clickHandler結果作為函數重用-但由於返回undefined ，因此JS停止以(intermediate value)(...) is not a function 。

---

認為稍微修改一下代碼是一個好主意-並制作了以下代碼片段，以期在其中包含更多，更生動的內容來說明該想法。

 const btn = document.getElementById('btn'); btn.onclick = function clickHandler(e) { console.log('Now clicked'); return e; } //btn.onclick = function clickHandler(){console.log("Now clicked"); }; (function() { console.log('Hi!'); })(); 

 <button type="button" id="btn">Click me!</button> 

如果您想讓他們有點生氣，請向您的同事展示並詢問相同的問題（為什么單擊處理程序在這里不起作用？）。 ）

Answer 2

您在這里錯過了半列

btn.onclick = function clickHandler(){console.log("Button clicked"); } ;

Answer 3

問題是在與起始碼(而代碼不與分號（結束前一行; ）。此處理二者線被一起執行的代碼的這樣的：

}(

要解決這個問題要么你必須提出; 在statemnet的末尾，或將IIFE代碼移到代碼頂部：

 (function(){ console.log("Hello"); })(); var btn = document.getElementById("btn"); btn.onclick = function clickHandler(){console.log("Button clicked"); } 

 <button type="button" id="btn" >Click</button>