javascript - "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");
  }
)
();

查看 () 的区别 - 您的函数表达式立即被调用。有趣的是......

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

... 被视为其参数值 - 无论如何都会被忽略。

之后，尝试将 clickHandler 的结果作为函数重用 - 但是，当它返回 undefined 时，JS 以 (中间值)( ...) 不是函数。

---

认为稍微改变一下代码是个好主意 - 并制作了以下代码片段来说明这个想法，其中包含更多戏剧性内容。

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>

将此展示给您的同事并问同样的问题(为什么点击处理程序在这里不起作用？)如果您想让他们有点……生气。 )