Object addEventListener仅适用于最后一个对象_Object_Addeventlistener

Object addEventListener仅适用于最后一个对象

object

Object addEventListener仅适用于最后一个对象,object,addeventlistener,Object,Addeventlistener,在下面的代码中，我似乎只得到最后添加的框（b1）的“otherboxclick”调用。如果我更改添加框的顺序，它总是最后一个有效我怎样才能让它适用于所有的箱子 <html> <head> </head> <body> <script type="text/javascript"> function otherboxclick(e){ alert("other clicked"); } fun

在下面的代码中，我似乎只得到最后添加的框（b1）的“otherboxclick”调用。如果我更改添加框的顺序，它总是最后一个有效

我怎样才能让它适用于所有的箱子

<html>
<head>
</head>
<body>

<script type="text/javascript">
    function otherboxclick(e){
        alert("other clicked");
    }

    function color_toggle_box(boxid, color, width, height, xpos, ypos)
    {
        this.boxid = boxid;

        document.body.innerHTML += 
            "<div id='" + boxid + "'; '; style='position:absolute;left:" + xpos + "px;top:" + 
            ypos +"px;width:" + width + "px;height:" + height + 
            "px;background:#000'></div>";


        this.boxdiv = document.getElementById(boxid);
        this.boxdiv.style.background = color;
        this.boxdiv.addEventListener('click', otherboxclick, true);
    }

    var b2 = new color_toggle_box("223", "#ff0", 100, 100, 205, 100);
    alert("b2 = " + b2.boxid);
    var b3 = new color_toggle_box("323", "#0ff", 100, 100, 100, 205);
    alert("b3 = " + b3.boxid);
    var b1 = new color_toggle_box("123", "#0f0", 100, 100, 100, 100);
    alert("b1 = " + b1.boxid);
</script>

</body>
</html>


函数otherboxclick（e）{
警报（“其他已点击”）；
}
功能颜色切换框（框ID、颜色、宽度、高度、xpos、YPO）
{
this.boxid=boxid；
document.body.innerHTML+=
“解释为什么Lior的代码有效而你的代码无效：
document.body.innerHTML +=

这总是一个错误。它将您的文档对象转换为HTML字符串，在该字符串中添加一些文本，然后重新解析整个HTML，生成新的文档对象来替换所有旧的文档对象
在最好的情况下，这会起作用，但速度有点慢。然而，更糟糕的副作用是，任何未序列化为HTML的信息都将完全丢失。其中包括表单字段值、JavaScript属性和引用以及事件侦听器。因此，每次构造颜色切换框时，您都会销毁所有您创建的对象以前打开了侦听器，因此永远不会调用侦听器。
+1我也更喜欢DOM属性设置，而不是HTML字符串攻击。在这种情况下，这可能没有多大区别，但是在没有正确转义的情况下将HTML字符串混在一起通常是一个非常糟糕的主意。谢谢。最后一条评论解释了这一点：addEventListener不会将其序列化为html，因此当我使用innerHtml时，我会丢失以前的调用。我很感谢您的快速响应，你们都很出色！事实上，当我有人回答问题时：假设我希望“otherboxclick”是一个函数，它可以对所讨论的颜色切换框进行处理。我知道otherboxclick接受一个“事件”参数，来自w我可以从一些全局列表中获取所单击元素的id。我可以使用该id来获取有问题的颜色切换框（比如有一个按id查找框的函数）.但是有没有办法使用addEventListener将调用直接绑定到颜色切换框右侧实例上的函数？不在addEventListener本身中，但可以通过将参数绑定到函数（或将this绑定到对象）来实现这一点。有关函数的更多信息，请参见的底部。绑定。我想知道在哪里可以系统地了解这些重要的细节。作为网络技术的新手，我还没有找到任何提到这一点的书籍。
document.body.innerHTML +=