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>

如果单击Span1Span2将显示在警报窗口中。我明白为什么:javascript 变量范围。但我不知道如何解决它。

一些上下文:我使用this.innerHTML了除了在 IE8 中工作正常的方法。this指向 IE8 中的窗口,而不是事件侦听器的父级。

4

3 回答 3

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 回答
2

您可以返回一个函数而不仅仅是声明一个函数,但我更喜欢@Dvir Azulay 的建议:

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 回答
0

试试这个:(将 span 的第二个定义更改为 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 回答