onclick事件自动触发，IIFE未执行的技术问题咨询

哦，这是JavaScript里非常典型的自动分号插入（ASI）失效的坑！我来给你拆解一下到底发生了什么：

首先看你的原始代码：

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

为什么会出现这种奇怪的现象？ #

第二行的函数表达式结尾没有写分号，JavaScript引擎会尝试自动补充分号，但这里的情况比较特殊——它会把下一行的左括号(当成是对前面函数的调用，相当于把代码解析成了这样：

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

这就导致了三个问题：

1. 你写的clickHandler函数被立即执行了（参数是后面那个匿名函数），所以页面一加载就打印了"Button clicked"
2. 这个函数没有返回值，所以btn.onclick实际上被赋值成了undefined，点击按钮根本不会触发任何操作
3. 你原本想写的IIFE根本没被当成独立的表达式执行，它只是作为参数传给了clickHandler，自然不会打印"Hello"

为什么换了第三行代码就正常了？ #

当你注释第二行，改用第三行的代码：

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

这行代码末尾有分号，JavaScript引擎会正确识别这是一个独立的赋值语句，下一行的IIFE就会被当成单独的立即执行函数表达式，正常执行并打印"Hello"，同时btn.onclick也被正确赋值为点击事件处理器。

修复方案 #

解决方法非常简单，只需要给第二行的函数表达式加上分号即可：

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

另外，还有一种写法是在IIFE的左括号前加分号（不过更推荐养成在表达式末尾写分号的好习惯，从根源避免这类问题）：

var btn = document.getElementById("btn");
btn.onclick = function clickHandler(){console.log("Button clicked"); }
;(function(){ console.log("Hello"); })(); // 前面加分号强制分割语句

内容的提问来源于stack exchange，提问作者Animesh Kumar