Javascript-Variablenbereich in der anonymen Funktion addEventListener

Question

Nov 22, 2009, 09:20 PM

html anonymous-function scope javascript

Javascript-Variablenbereich in der anonymen Funktion addEventListener

Wenn Sie auf eine Div klicken, sollte "1" angezeigt werden, wenn Sie auf Div 1 geklickt haben, oder "5", wenn Sie auf Div 2 geklickt haben. Ich habe versucht, diesen Code so einfach wie möglich zu gestalten, da dies in einer viel größeren Anwendung erforderlich ist.

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

Danke für Ihre Hilfe! :-)