4

各 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>

ご協力いただきありがとうございます！:-)

4

2 に答える 2

8

問題は、イベント リスナーと '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() の現在の「合計」値がパラメーターとして渡されます。これにより、無名関数のスコープに別の「合計」が設定されるため、イベント関数は無名関数のスコープを最初に参照するため、init() の合計が変更されるかどうかは問題になりません。

編集：

また、ヘルパー関数の右中括弧の後にセミコロンを配置する必要があります。そうしないと、スクリプトは「イベント」が未定義であると文句を言います。

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

  alert('id='+id);
};
于 2009-11-22T20:26:24.693 に答える
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));
于 2009-11-22T21:19:09.290 に答える