addEventListener JavaScript 中定义的变量

Posted 2023-02-22

【中文标题】addEventListener JavaScript 中定义的变量

【英文标题】：Variables defined in addEventListener JavaScript

【发布时间】：2017-03-05 07:08:34

【问题描述】：

我的 JS 脚本开头有以下代码。当我尝试在该代码下方打印任何已定义的变量时，控制台会显示未定义变量。你能告诉我为什么吗？也许我应该先调用这个函数？ 当我在下面定义变量然后将其打印到控制台时，它工作正常。

代码如下：

 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

提前感谢您的帮助！

【问题讨论】：

因为 console.log 行在 DOM 准备好之前执行并且你的监听器被调用。此外，您的变量似乎是该处理程序的本地范围。

【参考方案1】：

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

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

了解 javascript 作用域

Javascript local and global variable confusion

Demystifying JavaScript Variable Scope and Hoisting

JavaScript Scope

【参考方案2】：

您在函数内部创建变量，因此只能在函数内部访问它们。

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

 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);

【讨论】：

实际上我写了这个答案，而其他答案是写的。发布我的答案后，我阅读了其他答案。我的回答有什么问题？

没说错，只是当你发布它时，已经有 3 个答案说（其中至少有一个说）。

【参考方案3】：

这里有两个问题：

作用域内的 var X 将该变量设置为局部变量（而不是全局变量），因此您不能在作用域外使用它。 如果您在全局中使用var X，并且在范围内仅使用X = ...，则可以将变量设置为全局。

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

【参考方案4】：

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

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

【参考方案5】：

尝试在函数中记录你的变量

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 未在外部范围内定义。