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很友善，可以让你成为一个很好的示范fiddle＆lt; - here

Answer 2

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

该功能会立即执行，返回值将被指定为事件处理程序。

为了说明，它与执行相同：

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

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

如您所见，undefined作为事件处理程序传递。

Answer 3

另外，我想补充一些其他内容。

首先，将onclick视为对象的普通属性。

所以，object.onclick = value value = functionName() 完全没问题，例如，functionName()可能会返回一个值使用return something;

但是onclick不是普通的财产。当JS引擎在浏览器中遇到基于事件的属性的分配（例如onclick，ondblclick，onmouseover等），它会为每个属性创建一个堆栈元素，由映射b / w组成 onSomeEvent 和处理程序。

处理程序是一个函数对象。但是，如果你做了类似的事情 element.onSomeEvent = functionName();你只是打电话给函数functionName()如果这样就可以了 functionName()被定义为

function functionName() {return function(){/*do something*/};}

但是因为你的functionName没有返回一个函数，你会看到意想不到的结果。这是主要的 JavaScript之类的语言的缺点。用一种强类型语言抛出错误...因为

class Element {
    Function onclick = null;
    Function ondblclick = null;
    /*other code*/
}
document.getElementById('idName').onclick = new Function(); // correct
document.getElementById('idName').onclick = function(){}; // correct
document.getElementById('idName').onclick = functionName();
/*
 * correct if functionName defined as 
 * Function functionName() {return new Function();} or
 * Function functionName() {return function(){};}
 * and incorrect for any other case
 */

javascript函数之间的差异

3 个答案: