“ 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>