PopupFirstNameButton.addEventListener('click', FirstNameFunction);
// This gets called
function FirstNameFunction(){
alert("Hello");
}
// This does not
var FirstNameFunction = function (){
alert("Hello");
}
var FirstNameFunction = function (){
alert("Hello");
}
这是一个赋值语句，所以只有在执行了这个语句之后，FirstNameFunction才被赋值。所以当PopupFirstNameButton.addEventListener('click', FirstNameFunction);
执行时，FirstNameFunction是undefined
在第一个示例中，您创建了一个命名函数。函数的名字是FirstNameFunction。
在第二个示例中，您创建了一个匿名函数(没有名称的函数)。但是，您还定义了一个名为FirstNameFunction的变量，该变量包含对匿名函数的引用。在这种情况下，FirstNameFunction不是函数本身，而只是一个引用它的变量。
当像第一行那样分配事件处理程序时，这些差异之所以重要是因为全局作用域命名函数可以从代码中的任何地方引用，只要它们的声明在您尝试使用它们之前已经被解析和解释过。另一方面，变量只能在作用域中使用。这意味着在它们被定义之后，在它们超出范围之前。因此，只要在调用事件处理程序之前声明指向匿名函数的变量，并且在同一作用域内，就应该能够将第二个声明方法与事件处理程序赋值一起使用。
如此:
var FirstNameFunction = function (){
alert("Hello");
}
PopupFirstNameButton.addEventListener('click', FirstNameFunction, false);
这并不:
PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // FirstNameFunction is undefined!!
var FirstNameFunction = function (){
alert("Hello");
}
function declareFunction()
{
var FirstNameFunction = function (){
alert("Hello");
}
} // FirstNameFunction falls out of scope here and is no longer declared
declareFunction(); // The anonymous function exists while this is running but the reference is lost when the function returns
PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // This doesn't work.
您又错过了addEventListener的第3个参数!
出现这种情况是因为第1行使用的FirstNameFunction未定义，但在第9行使用匿名函数语法。使用function语法，FirstNameFunction符号已经在范围内了。
第一个函数在编译时绑定。function foo()语法允许提前声明函数。
第二个是简单的变量声明。你不能在变量声明之前使用它们
也许是因为他们都有相同的名字?I tried:
<HEAD>
<SCRIPT TYPE="text/JavaScript">
// This does not get called?
var FirstNameFunction = function (){
alert("Hello");
}
</SCRIPT>
</HEAD>
<BODY>
<button id="abutton" value="!"/>
<SCRIPT TYPE="text/JavaScript">
getById('abutton').addEventListener('click', FirstNameFunction);
</SCRIPT>
</BODY>
它工作(至少在Chrome)