Javascript:两个.onclick具有不同的功能

时间:2017-07-25 11:24:12

标签: javascript javascript-events

我正在尝试熟悉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");
}

5 个答案:

答案 0 :(得分:2)

因为绑定onclick时覆盖了test2函数。如果需要在单击时运行它们,请将绑定包装在匿名函数中并同时调用:

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

或者,您可以使用事件绑定,而不是使用addEventListener将匿名函数分配给元素的onclick属性。这有一个额外的好处,你可以独立删除其中一个或两个函数:

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

答案 1 :(得分:0)

你可能想要这个:

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

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

您可以根据需要添加任意数量的听众!

答案 2 :(得分:0)

.onclick不是函数而是属性,所以当你设置它两次时,你会第二次覆盖它。考虑一下:

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

当您尝试从test1内部呼叫test2时,您没有调用该功能。在Javascript中使用parens调用函数。例如:

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

对于你的第三个问题,区别在于你在第二个函数中返回一个新函数,而在第一个函数中你没有返回任何东西。

答案 3 :(得分:0)

虽然您可以将两个函数都包装在另一个函数中,但是您无法仅禁用一个事件处理程序而不能禁用另一个。相反,您可以使用_txtCoatOrderDate.Text = Convert.ToDateTime(dt.Rows[i]["Coat_CUSTM_Date"]).ToString("dd/MM/yyyy");

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

var validator = $("#myForm").validate({
    rules : {
        "file1" : {
            required : true,
            extension : "slx|mdl",
            accept : false
        },
        "file2" : {
            extension : "m",
            accept : false
        },
        "file3" : {
            extension : "xlsx|xls",
            accept : false
        },
        "file4" : {
            extension : "pdf",
            accept : false
        }
      }
});

答案 4 :(得分:-1)

除了Ben Msaid,你的第三个代码块工作但第二个代码块不起作用的原因是因为在第二个块中,你只是调用函数名称而在第三个块中,你实际上是在调用功能(括号)。 我不确定技术上的确切原因,但我相信

  

测试;

只会获取地址位置/其签名,而

  

试验();

告诉计算机运行该功能。

对于你的上一个问题,第一个问题返回一个记录的函数,而第二个问题只是一个记录的函数。

因此,要调用返回函数的那个​​,你可以这样做:

  

试验()(); //调用从测试调用返回的函数

相比
  

试验();