使用Javascript动态添加html元素和事件处理程序_Javascript_Dom

使用Javascript动态添加html元素和事件处理程序

javascript dom

使用Javascript动态添加html元素和事件处理程序,javascript,dom,Javascript,Dom,我在表单中添加了3个div元素，并动态地为每个元素添加事件处理程序。它应该弹出一条显示该div的id的消息。但是，无论我单击哪个框，它都会弹出最后一个div的id，即10175 如有任何意见，将不胜感激 <html> <head> <style type="text/css"> .empty { background-color: green; } .safebox

我在表单中添加了3个div元素，并动态地为每个元素添加事件处理程序。它应该弹出一条显示该div的id的消息。但是，无论我单击哪个框，它都会弹出最后一个div的id，即10175

如有任何意见，将不胜感激

<html>
<head>
<style type="text/css">
  .empty
          {
            background-color: green;
          }
   .safebox
          {
        margin-left: auto;
        margin-right: 20px;
        margin-top: 20px;
        text-align: center;
        float: left;
        width: 60px;
        height: auto;
          }
</style>
 <script type="text/javascript">
    function ClickMe(elem){
        alert(elem.id);
    };

   window.onload=function(){
    var tempdiv = document.createElement('div');
    var text = document.createTextNode('0173');
    tempdiv.className='safebox empty';
    tempdiv.appendChild(text);
    tempdiv.setAttribute('id','10173');
    tempdiv.appendChild(text);
    document.getElementById('pagewarpper').appendChild(tempdiv);

    var currentdiv = document.getElementById('10173');
    if (currentdiv.addEventListener){
       currentdiv.addEventListener('click', function(){ClickMe(currentdiv);}, false);
    }
    else {
      currentdiv.attachEvent('onclick', function(){ClickMe(currentdiv);});
    }

    var tempdiv = document.createElement('div');
    var text = document.createTextNode('0174');
    tempdiv.className='safebox empty';
    tempdiv.appendChild(text);
    tempdiv.setAttribute('id','10174');
    tempdiv.appendChild(text);
    document.getElementById('pagewarpper').appendChild(tempdiv);

    var currentdiv = document.getElementById('10174');
    if (currentdiv.addEventListener){
       currentdiv.addEventListener('click', function(){ClickMe(currentdiv);}, false);
    }
    else {
      currentdiv.attachEvent('onclick', function(){ClickMe(currentdiv);});
    }

    var tempdiv = document.createElement('div');
    var text = document.createTextNode('0175');
    tempdiv.className='safebox empty';
    tempdiv.appendChild(text);
    tempdiv.setAttribute('id','10175');
    tempdiv.appendChild(text);
    document.getElementById('pagewarpper').appendChild(tempdiv);

    var currentdiv = document.getElementById('10175');
    if (currentdiv.addEventListener){
       currentdiv.addEventListener('click', function(){ClickMe(currentdiv);}, false);
    }
    else {
      currentdiv.attachEvent('onclick', function(){ClickMe(currentdiv);});
    }
      }
     </script>
   </header>
  <body>
 <form>
 <div id="pagewarpper">
</div>
  </form>
 </body>


空的
{
背景颜色：绿色；
}
.保险箱
{
左边距：自动；
右边距：20px；
边缘顶部：20px；
文本对齐：居中；
浮动：左；
宽度：60px；
高度：自动；
}
功能ClickMe（元素）{
警报（元素id）；
};
window.onload=function（）{
var tempdiv=document.createElement（'div'）；
var text=document.createTextNode（'0173'）；
tempdiv.className='safebox empty'；
tempdiv.appendChild（文本）；
tempdiv.setAttribute（'id'，'10173'）；
tempdiv.appendChild（文本）；
document.getElementById（'pagewarpper'）.appendChild（tempdiv）；
var currentdiv=document.getElementById（'10173'）；
if（currentdiv.addEventListener）{
currentdiv.addEventListener（'click'，function（）{ClickMe（currentdiv）；}，false）；
}
否则{
currentdiv.attachEvent（'onclick'，function（）{ClickMe（currentdiv）；}）；
}
var tempdiv=document.createElement（'div'）；
var text=document.createTextNode（'0174'）；
tempdiv.className='safebox empty'；
tempdiv.appendChild（文本）；
setAttribute（'id'，'10174'）；
tempdiv.appendChild（文本）；
document.getElementById（'pagewarpper'）.appendChild（tempdiv）；
var currentdiv=document.getElementById（'10174'）；
if（currentdiv.addEventListener）{
currentdiv.addEventListener（'click'，function（）{ClickMe（currentdiv）；}，false）；
}
否则{
currentdiv.attachEvent（'onclick'，function（）{ClickMe（currentdiv）；}）；
}
var tempdiv=document.createElement（'div'）；
var text=document.createTextNode（'0175'）；
tempdiv.className='safebox empty'；
tempdiv.appendChild（文本）；
setAttribute（'id'，'10175'）；
tempdiv.appendChild（文本）；
document.getElementById（'pagewarpper'）.appendChild（tempdiv）；
var currentdiv=document.getElementById（'10175'）；
if（currentdiv.addEventListener）{
currentdiv.addEventListener（'click'，function（）{ClickMe（currentdiv）；}，false）；
}
否则{
currentdiv.attachEvent（'onclick'，function（）{ClickMe（currentdiv）；}）；
}
}

试试看

使用currentDiv，您将创建一个闭包，该闭包指向3个div的同一对象。最后一个。

这是一个结束问题-

currentdiv

是最后一个

，因此所有函数在执行

ClickMe（currentdiv）

时实际上都通过了最后一个。但是，您可以使其完全独立，并在侦听器中使用

this

而不是

currentdiv

。

ClickMe(this);