Javascript的object.onClick运行函数而不是设置onClick，如何防止这种情况发生并只执行onClick函数？

Question

我有以下代码：

function sdefaults()
{
   alert("test");
}

var btnpos, sbtn;
btnpos = document.getElementsByName('somePosition')[0];
sbtn = document.createElement('input');
btnpos.parentNode.insertBefore(sbtn, btnpos.nextSibling);
sbtn.type = "button";
sbtn.name = "social";
sbtn.value = "Defaults";
sbtn.onClick = sdefaults();

按钮出现在我想要的位置，并且名称/值设置正确。但是，当我加载页面时，sdefaults() 函数会运行，然后如果我单击该按钮，则不会发生任何情况。任何人都可以提供有关如何防止该函数在负载上运行并强制其仅在单击时运行的见解吗？

谢谢

Answer 1

更改

sbtn.onClick = sdefaults();

为：

sbtn.onClick = sdefaults;

---

sbtn.onClick = sdefaults(); 表示：“运行 sdefaults 函数并将结果存储在 sbtn.onClick 中。

< code>btn.onClick = sdefaults; 表示：“将 sbtn.onClick 设置为函数 sdefaults”，这就是您要查找的内容。

Answer 2

您必须了解函数引用和函数调用之间的区别。

考虑以下函数

function foo()
{
  alert( 'Hello World' );
}

现在，让我们看一下引用该函数的一些示例。为了引用一个函数，我们使用它的符号名称，就像任何其他变量一样。

// Alert contents of foo
alert( foo );

// Set foo as the click handler for the body
document.body.onclick = foo;

// Assign a new function to foo
foo = function(){ alert( 'Goodbye!' ); }

现在我们将考虑函数调用。这意味着该函数执行并且其返回值被发送回调用范围。

// Invoke foo simply
foo();

// Invoke foo with a specific scope
foo.apply( this ); // or foo.call( this );

现在，完全可以通过更改 sdefaults() 的代码来修改您的代码片段。这就是它的样子。

function sdefaults()
{
  return function()
  {
    alert("test");
  }
}

现在，当您执行 sbtn.onClick = sdefaults(); 时，onClick 属性会收到它所期望的函数，因为我们已将 sdefaults 修改为实际上没有警报“test”，但返回一个匿名函数，该函数本身会警报“test”。 （顺便说一句，这种特定技术通常称为 lambda 或委托函数）

希望能够澄清这一点。