addEventListener匿名函数中的Javascript变量范围_Javascript_Html_Scope_Anonymous Function

addEventListener匿名函数中的Javascript变量范围

javascript html

addEventListener匿名函数中的Javascript变量范围,javascript,html,scope,anonymous-function,Javascript,Html,Scope,Anonymous Function,单击每个div时，如果单击了div 1，则应向“1”发出警报；如果单击了div 2，则应向“5”发出警报。我已经尽力使这段代码尽可能容易理解，因为这是一个更大的应用程序所需要的 <html> <head> <style type="text/css"> #div1 { background-color: #00ff00; margin: 10px; padding: 10px; } #div2 { background-color: #0000ff; marg

单击每个div时，如果单击了div 1，则应向“1”发出警报；如果单击了div 2，则应向“5”发出警报。我已经尽力使这段代码尽可能容易理解，因为这是一个更大的应用程序所需要的

<html>
<head>
<style type="text/css">
#div1 { background-color: #00ff00; margin: 10px; padding: 10px; }
#div2 { background-color: #0000ff; margin: 10px; padding: 10px; }
</style>
<script type="text/javascript">

function init()
{
  var total = 1;

  var div1 = document.getElementById('div1'),
      div2 = document.getElementById('div2');

  var helper = function(event, id)
  {
      if (event.stopPropagation) event.stopPropagation();
      if (event.preventDefault) event.preventDefault();

      alert('id='+id);
  }

  div1.addEventListener('click', function(event) { helper(event, total); }, false);

  total += 4;

  div2.addEventListener('click', function(event) { helper(event, total); }, false);

}

</script>
</head>

<body onload="init();">

<div id="div1">1</div>
<div id="div2">2</div>

</body>
</html>


#div1{背景色：00ff00；边距：10px；填充：10px；}
#div2{背景色：0000ff；边距：10px；填充：10px；}
函数init（）
{
var总计=1；
var div1=document.getElementById（'div1'），
div2=document.getElementById（'div2'）；
var helper=函数（事件，id）
{
if（event.stopPropagation）event.stopPropagation（）；
if（event.preventDefault）event.preventDefault（）；
警报（'id='+id）；
}
div1.addEventListener（'click'，函数（事件）{helper（事件，总计）；}，false）；
总数+=4；
div2.addEventListener（'click'，函数（事件）{helper（事件，总计）；}，false）；
}
1.
2.

谢谢你的帮助！：-）

问题在于事件侦听器和“total”都存在于同一范围内（init（））

事件函数总是在init（）范围内引用total，即使在声明事件函数后它发生了更改

为了避免这种情况，事件函数需要在其自己的作用域中有一个不会改变的“total”。您可以使用匿名函数添加另一层作用域

例如：

(function (total) {
    div1.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

total += 4;

(function (total) {
  div2.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

匿名函数作为参数传递init（）的当前“total”值。这将为匿名函数的作用域设置另一个“total”，因此init（）的total是否更改并不重要，因为事件函数将首先引用匿名函数的作用域

编辑：

此外，还需要在helper函数的右大括号后放置分号，否则脚本将抱怨“event”未定义

var helper = function(event, id)
{
  if (event.stopPropagation) event.stopPropagation();
  if (event.preventDefault) event.preventDefault();

  alert('id='+id);
};

这几乎是一样的，但我认为会更好：

div1.addEventListener('click', function(t){ return function(event) { helper(event, t); }}(total), false);

而不是：

(function (total) {
    div2.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

啊。因此，有效的总量就像一个变量指针，就像C++变量*一样，实际上，它被复制到一个局部范围内。如果它是一个指针，那么它会在范围内和范围外都发生变化，这会使您回到原来的问题上。@Gary Matt的示例是正确的，这里有一些术语供您使用。您遇到特定的问题是因为一种称为“闭包”（closure）的东西，它是JavaScript的一个强大特性。Matt向您展示的是如何使用匿名函数和一种称为curry的技术绕过closure属性（正如您所看到的，它有时会妨碍您）。见和。