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()函數，然后如果單擊按鈕，則什么也不會發生。 誰能提供關於如何防止該函數在加載時運行並強制其僅在onclick上運行的見解？

謝謝

Answer 1

更改：

sbtn.onClick = sdefaults();

至：

sbtn.onClick = sdefaults;

---

sbtn.onClick = sdefaults(); 表示：“運行sdefaults函數並將結果存儲在sbtn.onClick 。

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或委托函數）

希望能清除它。