兩個不同功能的 .onclick

Question

我試圖讓自己熟悉 Javascript，這是我在我的計算器上看到的一種行為。

   setup();    
    function setup(){
      element = document.getElementById("1");
      console.log(element);
      
      if(element.innerHTML === "1"){
        var test = element;
        element.onclick = test1;
        element.onclick = test2;
      }
    
    }
    
    function test2(){
      console.log("Test2 function");
    }
    
    function test1(){
      console.log("Test1 Function");
    }

如果我運行這個，怎么會只有 test2 函數返回一個日志，它是只返回最后一個調用的函數，還是.onclick函數的行為？

現在，如果我嘗試像這樣從 test2 內部調用 test1 函數，它仍然不起作用。

function test2(){
  console.log("Test2 function");
  test1;
}

但如果我改為這樣做：

function test2(){
  console.log("Test2 function");
  test1();
}

它記錄了他們兩個。 怎么來的？ 如果相關的話，我已經習慣了 Ruby。

==================================

還有一個問題，有什么區別

function test(){
  return function(){
   console.log("test!");
  }
}

到

function test(){
  console.log("test");
}

Answer 1

因為您在綁定test2時覆蓋了onclick函數。 如果您需要在單擊時同時運行兩者，請將綁定包裝在匿名函數中並調用兩者：

if(element.innerHTML === "1")
{
    element.onclick = function() {  
        test1();
        test2();
    }; 
}

或者，您可以使用事件綁定，而不是使用addEventListener將匿名函數分配給元素的onclick屬性。 這具有額外的優勢，您可以獨立刪除其中一個或兩個功能：

if(element.innerHTML === "1")
{
    element.addEventListener('click', test1);
    element.addEventListener('click', test2);
}

Answer 2

你可能想要這個：

element.addEventListener(
  "click",
   () => console.log('log1')
)

element.addEventListener(
  "click",
   () => console.log('log2')
)

您可以根據需要添加任意數量的偵聽器！

Answer 3

.onclick不是一個函數而是一個屬性，所以當你設置它兩次時，你會第二次覆蓋它。 考慮一下：

let a = 'foo'
a = 'bar'
// a is going to have the value 'bar'

至於當您嘗試從test2內部調用test1 ，您並沒有調用該函數。 在 Javascript 中使用括號調用函數。 例如：

function test2(){
  console.log("Test2 function");
  test1();
}

對於您的第三個問題，不同之處在於在第二個函數中您返回了一個新函數，而在第一個函數中您沒有返回任何內容。

Answer 4

雖然您可以將這兩個函數包裝在另一個函數中，但您無法僅禁用一個事件處理程序，而不能禁用另一個。 相反，您可以使用addEventListener

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

element.addEventListener('click', test1);
element.addEventListener('click', test2);

Answer 5

除了 Ben Msaid 之外，您的第三個代碼塊有效但第二個代碼塊不起作用的原因是因為在第二個塊中，您只需調用函數名稱，而在第三個塊中，您實際上是在調用函數（使用括號）。 我不確定確切的技術原因，但我相信

測試；

將簡單地獲取地址位置/它的簽名，而

測試（）；

正在告訴計算機運行該功能。

對於您的最后一個問題，第一個返回一個記錄函數，而第二個只是一個記錄函數。

因此，要調用返回該函數的函數，您可以執行以下操作：

測試（）（）； //調用測試調用返回的函數

相比

測試（）；