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

查看差异() make - 您的函数表达式立即被调用。这很有趣......

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

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

之后，尝试将clickHandler的结果重用为函数 - 但是，当它返回undefined时，JS将以(intermediate value)(...) is not a function停止。

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

＆＃13;

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!');
})();

＆＃13;

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

＆＃13;

向你的同事展示这个并问同样的问题（为什么不点击处理程序在这里工作？）如果你想让他们有点......疯了。）

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>

“onclick”事件会自动触发

3 个答案: