javascript - 两个不同功能的.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

因为您在绑定(bind) test2 时覆盖了 onclick 函数。如果您需要在单击时运行两者，请将绑定(bind)包装在匿名函数内并调用两者:

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

或者，您可以使用事件绑定(bind)，而不是使用 addEventListener 将匿名函数分配给元素的 onclick 属性。 。这样做的另一个优点是您可以独立删除其中一个或两个函数:

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