"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 行和 un-commenting 注释掉第 3 行（上面代码中注释掉的行）时，代码按预期工作。

这两行唯一的区别是第2行最后没有;，而第3行有。

此外，如果我删除 IIFE 并保持其余代码不变，代码工作正常。

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

Answer 1

你错过了这里的半专栏

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

Answer 2

这很棘手。因为代码的第二行中缺少分号，所以解析器不会停在那里 - 并且会使用它可以使用的所有标记。最后，代码被解析为...

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 的结果试图作为函数重用 - 但是，由于它 returns 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 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" 事件自动触发

"onclick" event gets fired automatically

javascript

events

iife