javascript中addEventListener定义的变量


Variables defined in addEventListener JavaScript

我在我的JS Scirpt的Begining中有下面的代码。当我尝试在代码下面打印任何已定义的变量时，控制台说变量没有定义。你能告诉我为什么吗？也许我应该先打电话给Funtion？当我在下面定义变量，然后将其打印到控制台时，它可以正常工作。

代码如下：

1
2
3
4
5
6
7
8
9
10
 document.addEventListener("DOMContentLoaded", function(){
     var homeElement = document.getElementById("home");
     var childElements = document.querySelector(".oferts").children;
     var banner = document.querySelector(".ban");
     var blocks = document.querySelectorAll(".block");
     var links = document.querySelector(".links").children;

 });

 console.log(homeElement); //Here I got info that this variable is not defined

提前感谢您的帮助！

相关讨论

变量是在本地定义的，无法在函数外部访问。

您可以删除var关键字使变量成为全局变量，并且可以在脚本的任何位置调用该变量。

了解javascript范围

javascript局部和全局变量混淆

解除JavaScript变量范围的神秘化和提升

javascript范围

在函数内部创建变量，这样它们只能在函数内部访问。

要使全局可访问变量，只需将其更改为以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 var homeElement;
 var childElements;
 var banner;
 var blocks;
 var links;

 document.addEventListener("DOMContentLoaded", function(){
   homeElement = document.getElementById("home");
   childElements = document.querySelector(".oferts").children;
   banner = document.querySelector(".ban");
   blocks = document.querySelectorAll(".block");
   links = document.querySelector(".links").children;
 });

 console.log(homeElement);
相关讨论

这是因为变量是在事件侦听器函数的作用域中创建的，而console.log是在全局作用域中执行的。全局范围没有访问变量范围的权限。

您可以将console.log移到函数中，或者在函数外部声明变量。

尝试将变量记录在函数内部

1
2
3
4
5
6
7
8
9
document.addEventListener("DOMContentLoaded", function(){
     var homeElement = document.getElementById("home");
     var childElements = document.querySelector(".oferts").children;
     var banner = document.querySelector(".ban");
     var blocks = document.querySelectorAll(".block");
     var links = document.querySelector(".links").children;

     console.log(homeElement);// <--
 });

您的问题是因为homeElement未在外部范围内定义。

这里有两个问题：

  • 作用域内的var X将该变量设置为局部变量(而不是全局变量)，因此不能在作用域外使用该变量。
    如果在全局中使用var X，并且在作用域中只使用X = ...，则可以将变量设置为global。

  • 根据您的代码，console.log函数在addEventListener回调函数之前运行，因此在运行时，变量尚未设置。