javascript函数之间的差异

Question

我知道这个问题可能很愚蠢,只是想知道,我不确定这个主题是否符合我目前的要求.但还是想问一下.

  <button id="Clk">Click on me</button>

   document.getElementById("Clk").onclick = function(){alert("firedme!")}

   document.getElementById("Clk").onclick = fire();

   function fire(){alert("I am fired!")}

我看到第一个"函数"没有在页面加载或刷新时触发,但是当第二个fire()
在页面加载时被触发,后来这个函数在点击时没有被触发.我很困惑,只需要澄清一下.

Answer 1

您需要传递fire给onclick函数引用,而不是调用.

 document.getElementById("Clk").onclick = fire;

当你传递fire()给onclick处理程序时,它会立即触发,并且函数的返回也是你设置的onclick.通过传递对函数的引用,它会阻止它运行直到触发事件.它与上面的匿名函数处理程序基本相同.

rlemon非常友好地让你成为一个很好的演示小提琴 < - 这里

Answer 2

第二个因为使用括号而立即触发().将事件处理程序分配给现有函数时,请不要包括括号.

发生的是函数立即执行,返回值被指定为事件处理程序.

为了说明,它与执行相同:

var result = fire();
console.log( result ); // undefined

document.getElementById("Clk").onclick = result;

如您所见,undefined作为事件处理程序传递.