Question

我有一个eventhandler和函数，用于将项添加到列表中并从列表中删除项。我的第一个函数（处理程序）是将btn元素存储在函数的局部变量中。如果我尝试使用删除按钮执行相同操作，则会在开发工具中出现引用错误。如果我将正在获取删除按钮的变量移出函数并将其设置为全局，则它可以正常工作。为什么一个函数与函数中设置的按钮的变量一起使用，而另一个函数则不然。这是我的代码。有问题的变量被评论

var handler = function(event){

  //this btn variable does work when declared inside handler function

  var btn = document.getElementById('btn');
  var input = document.getElementById('input').value;
  var item = document.createElement('li');
  var list = document.getElementById('list');
  var x = document.createElement('button');
  item.innerHTML = input;
  list.appendChild(item);
  item.appendChild(x);
};
//This dlt variable doesn't work if declared in function remove

var dlt = document.getElementById('delete');

var remove = function(event){
  var list = document.getElementById('list');
  var item = document.querySelector('li');
  list.removeChild(item);
};

btn.addEventListener('click', handler);
dlt.addEventListener('click', remove);

Answer 1

参考btn只能偶然。

它不引用您在handler函数中声明的变量，它引用自动创建的全局变量btn，因为您有一个ID为btn的元素。有关详细信息，请参阅Do DOM tree elements with ids become global variables?。

您可以通过将变量名称更改为var button = document.getElementById('btn');和button.addEventListener('click', handler);来轻松进行测试。您会注意到这也不起作用。

JavaScript具有函数范围，因此无法从函数外部访问函数内声明的每个变量（var foo;）。

Answer 2

这里有一个小范例如何在JS中使用范围：

var i = "hello"; // Defined global var to "hello"

function test(){ // Define Function to test scope
    var i = "world"; // Function internal var
    console.log("1: "+i); // will always give "world" back
}

test();

console.log("2: "+i); // Will give "hello" back

让我们开始代码......

您将在JS控制台中看到：

>1: world
>2: hello

但是，如果你改变一件简单的事情：删除＆＃34; var＆＃34;在我面前

var i = "hello"; // Defined global var to "hello"

function test(){ // Define Function to test scope
    i = "world"; // This will overwrite the global var with "world"
    console.log("1: "+i); // will also give "world" back
}

test();

console.log("2: "+i); // Will give "world" back

让我们开始代码......

您将在JS控制台中看到：

>1: world
>2: world

希望它对你有帮助;）

祝你好运

达斯汀

Javascript变量范围和事件处理程序

2 个答案: