javascript函数之间的区别

Differences between javascript function

本文关键字：区别 之间 函数 javascript      更新时间：2023-09-26

我知道这个问题可能很傻，只是想知道，我不确定这个话题是否符合我目前的要求。但还是想问一下。

  <button id="Clk">Click on me</button>
   document.getElementById("Clk").onclick = function(){alert("firedme!")}
   document.getElementById("Clk").onclick = fire();
   function fire(){alert("I am fired!")}

我看到第一个"函数"没有在页面加载或刷新时触发，但第二个fire()被触发
当页面加载时，这个函数不会在点击时被触发。我很困惑，只是需要澄清一下。

您需要将fire传递给onclick作为函数引用，而不是调用。

 document.getElementById("Clk").onclick = fire;

当你传递fire()到onclick处理程序时，它立即触发，从函数返回的是你正在设置的onclick。通过向函数传递引用，它将停止函数运行，直到事件被触发。它本质上与上面的匿名函数处理程序相同。

rlemon很好地为您做了一个很好的演示小提琴<——在这里

第二个立即触发，因为您使用了括号()。当将事件处理程序分配给现有函数时，不要包含圆括号。

函数直接执行，返回值被赋值为事件处理程序。

为了说明，它与以下操作相同:

var result = fire();
console.log( result ); // undefined
document.getElementById("Clk").onclick = result;

可以看到，undefined作为事件处理程序被传递。

另外，我还想补充一些东西。

首先，把onclick看作一个对象的普通属性。

所以，object.onclick = value，其中value = functionName()是完全正确，例如，functionName()可以返回一个值使用return something;

但是onclick不是一个普通的属性。当JS引擎在浏览器中遇到基于事件的属性赋值(例如onclick, ondblclick, onmouseover等)，它为每个属性创建一个堆栈元素，由映射b/w组成onSomeEvent和handler。

处理器是一个函数对象。但是如果你这样做element.onSomeEvent = functionName();你只是在调用函数functionName()，这将是好的，如果functionName()定义为

function functionName() {return function(){/*do something*/};}

但是因为在您的示例中functionName没有返回一个函数，所以您会看到一个意外的结果。这是主要的JavaScript等语言的缺点。在强类型语言中抛出一个错误…因为

class Element {
    Function onclick = null;
    Function ondblclick = null;
    /*other code*/
}
document.getElementById('idName').onclick = new Function(); // correct
document.getElementById('idName').onclick = function(){}; // correct
document.getElementById('idName').onclick = functionName();
/*
 * correct if functionName defined as 
 * Function functionName() {return new Function();} or
 * Function functionName() {return function(){};}
 * and incorrect for any other case
 */
相关文章：