Question

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

感谢您的帮助！： - ）

Answer 1

问题是事件监听器和'total'都存在于同一范围内（init（））

事件函数总是在init（）范围内引用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（）的总和是否发生变化无关紧要，因为事件函数将首先引用匿名函数的范围。

修改

此外，您需要在辅助函数的右括号之后放置一个分号，否则脚本会抱怨“事件”未定义。

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

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

Answer 2

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

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

AddEventListener匿名函数中的Javascript变量作用域

2 个答案: