2

次の JavaScript には、望ましくない動作がいくつかあります。

<html>
<script>
  function AddEventListener(el, listener)
  {
    el.addEventListener ? el.addEventListener('click', listener) : 
                          el.attachEvent('onclick', listener);
  }

  function Init(parent) 
  {
    var span = document.createElement("span");
    span.innerText = "Span1";

    AddEventListener(span, function() { alert(span.innerText); } ); 
    parent.appendChild(span);
    var span = document.createElement("span");

    span.innerText = "Span2";
    parent.appendChild(span);
  }
</script>
<body onload="Init(document.getElementById('drop'));">
  <div id='drop'></div>
</body>
</html>

をクリックすると、警告ウィンドウSpan1にが表示されます。Span2理由はわかりました：javascript変数のスコープ。しかし、私はそれを解決する方法がわかりません。

いくつかのコンテキスト：this.innerHTMLIE8を除いて正常に動作するものを使用しました。thisイベントリスナーの親ではなく、IE8 のウィンドウを指します。

4

3 に答える 3

2

You can return a function instead of just declaring one, but I like @Dvir Azulay suggestion better:

function CreateAlert(span)
{
    return function() { alert(span.InnerText); };
}

function Init(parent) 
{
    var span=document.createElement("span");
    span.innerText="Span1";
    AddEventListener(span, CreateAlert(span)); 
    parent.appendChild(span);
    var span=document.createElement("span");
    span.innerText="Span2";
    parent.appendChild(span);
}
于 2012-06-14T17:15:46.930 に答える
2

クリックコールバックでグローバル変数を使用する代わりに、event登録するすべてのイベントに渡されるパラメーターを使用し、そのevent.targetパラメーターを使用して、イベントに参加したDOM要素を取得できます。

そのために、登録するイベントリスナーを次のように変更できます。AddEventListener(span,function(event) {alert((event.target ? event.target : event.srcElement).innerText);});

ここにあなたのコードを使用してその例を設定しました：http：//jsfiddle.net/dvirazulay/fTa6T/1/

于 2012-06-14T17:13:00.373 に答える
0

これを試してください: (span の 2 番目の定義を span2 に変更)

<!DOCTYPE html>
<html>
<script>

function AddEventListener(el,listener)
{
  el.addEventListener ? el.addEventListener('click', listener) :     el.attachEvent('onclick', listener);
}

function Init(parent) 
{
 var span=document.createElement("span");
 span.innerText="Span1";
 AddEventListener(span,function() {alert(span.innerText);}); 
 parent.appendChild(span);
 var span2=document.createElement("span");
 span2.innerText="Span2";
 parent.appendChild(span2);
}
</script>
<body onload="Init(document.getElementById('drop'));">
<div id='drop'></div>
</body>
</html>
于 2012-06-14T17:13:49.723 に答える