AddEventListener匿名函數中的Javascript變量作用域

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（）的總和是否發生變化並不重要，因為事件函數將首先引用匿名函數的作用域。

編輯：

此外，您需要在輔助函數的右括號后面放置一個分號，否則腳本會抱怨'event'未定義。

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 個解決方案

解決方案1
8 已采納 2009-11-22 20:26:24

解決方案2
2 2009-11-22 21:19:09

AddEventListener匿名函數中的Javascript變量作用域

問題描述

2 個解決方案

解決方案1 8 已采納 2009-11-22 20:26:24

解決方案2 2 2009-11-22 21:19:09

解決方案1
8 已采納 2009-11-22 20:26:24

解決方案2
2 2009-11-22 21:19:09