函数调用方法说明

Question

我对函数调用有些怀疑。请看以下3个实例。

当我需要将函数调用用作function() { flip("hawaiian"); }时 当我需要使用函数调用formValid [没有大括号]

时

帮助我更好地理解这一点。我仍然对我需要使用这些不同方法的情况感到困惑。

hawaiiBtn.onclick = function() { flip("hawaiian"); };

formEl.onclick = formValid;

formEl.addEventListener("click", `formValid`);

Answer 1

具有内联单击事件的匿名函数

hawaiiBtn.onclick = function() { flip("hawaiian"); };

这是一个匿名函数表达式，分配给内联onclick事件。如果您只需要元素上的单击处理程序，并且您还没有现有函数，或者不想重用函数，请使用此函数。

将函数对象传递给内联单击事件

formEl.onclick = formValid;

与第一种方法类似，但是在这里传递函数对象或命名函数，而不是创建新的函数表达式。如果您已经有一个函数或想要重复使用函数而不重复代码，请使用此函数。

element.addEventListener

这与onclick之间的区别在于它可以处理同一元素和同一事件的多个点击处理程序，而onclick只能处理单个函数。您可以使用匿名函数或函数对象。

示例：

element.addEventListener('click', function(){
    console.log("first fired");
});
element.addEventListener('click', function(){
    console.log("second fired");
});

上述两个函数都会在引发click事件时执行。但是，使用内联onclick执行此操作只会执行最后一个函数。

element.onclick = function(){
    console.log("this will never fire because it gets overwritten");
};
element.onclick = function(){
    console.log("this will fire because its the last one, and will overwrite the previous");
};