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

When clicking on each div it should alert '1' if div 1 was clicked on or '5' if div 2 was clicked on. I have tried to make this code as easy to as possible because this is needed in a much larger application.

当单击每个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>

Thanks for your help! :-)

谢谢你的帮助!:-)

2 个解决方案

#1

The problem is that the event listeners and 'total' both exist in the same scope (init())

问题是事件监听器和“total”都存在于同一个范围内(init())

The event functions are always going to reference total within the init() scope, even if it is changed after the event functions are declared

事件函数总是在init()范围内引用total，即使它在声明事件函数之后被更改

To get around this, the event functions need to have a 'total' in their own scope which will not change. You can add another layer of scope using an anonymous function

要解决这个问题，事件函数需要在它们自己的作用域中有一个“total”，这个值不会改变。您可以使用匿名函数添加另一层作用域。

For example:

例如:

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

The anonymous functions are passed init()'s current 'total' value as a parameter. This sets another 'total' to the anonymous function's scope, so it does not matter if init()'s total changes or not, because the event function will FIRST reference the anonymous function's scope.

匿名函数通过init()的当前“total”值作为参数传递。这将为匿名函数的作用域设置另一个“total”，因此无论init()的作用域是否发生更改，都没有关系，因为事件函数将首先引用匿名函数的作用域。

Edit:

编辑:

Also, you need to place a semicolon after the closing brace of the helper function, otherwise the script will complain that 'event' is undefined.

此外，您需要在helper函数的闭括号后面放置一个分号，否则脚本会抱怨'event'没有定义。

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

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

#2

This is almost the same but i think it will be better:

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

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

instead of:

而不是:

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

#1