addEventListener 仅适用于最后一个对象答案

【问题标题】：addEventListener only works on last objectaddEventListener 仅适用于最后一个对象
【发布时间】：2009-10-27 23:39:39
【问题描述】：

在下面的代码中，我似乎只得到了最后一个添加框 (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>

【问题讨论】：

标签： object addeventlistener

【解决方案1】：

解释为什么 Lior 的代码有效而你的无效：

document.body.innerHTML +=

总是一个错误。它将您的文档对象转换为 HTML 字符串，向该字符串添加一些文本，然后重新解析整个 HTML 以生成新的文档对象来替换所有旧的。

在最好的情况下，这会起作用，但有点慢。然而，更糟糕的副作用是任何不序列化为 HTML 的信息都将完全丢失。这包括表单字段值、JavaScript 属性和引用以及事件侦听器。所以，每次你构造一个 color_toggle_box 时，你都在破坏你之前有监听器的所有对象；因此永远不会调用监听器。

【讨论】：

谢谢。最后一条评论解释了它： addEventListener 不会序列化为 html，所以当我使用 innerHtml 时，我会丢失以前的调用。感谢您的及时回复，你们摇滚！
实际上，当我有人回答问题时：假设我希望 'otherboxclick' 是一个函数，可以对相关的 color_toggle_box 执行某些操作。我知道 otherboxclick 需要一个“事件”参数，我可以从中获取单击的元素的 ID。我可以使用该 id 从某个全局列表中获取有问题的 color_toggle_box（比如有一个按 id 查找框的函数）。但是有没有办法直接使用 addEventListener 将调用绑定到 color_toggle_box 的正确实例上的函数？
不在 addEventListener 本身中，但您可以通过将参数绑定到函数（或将 this 绑定到对象）来实现。有关 function.bind 的更多信息，请参阅stackoverflow.com/questions/1558065/… 的底部。
我想知道在哪里可以系统地了解这些重要的细节。作为网络技术的新手，我还没有找到任何提到这一点的书籍。

【解决方案2】：

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

        this.boxdiv = document.createElement('DIV');
        this.boxdiv.id = boxid;
        this.boxdiv.style.position = 'absolute';
        this.boxdiv.style.left = xpos + "px";
        this.boxdiv.style.top = ypos + "px";
        this.boxdiv.style.width = width + "px";
        this.boxdiv.style.height = height + "px";
        this.boxdiv.style.backgroundColor = color;

        document.body.appendChild(this.boxdiv);
        this.boxdiv.addEventListener('click', otherboxclick, true);
    }

【讨论】：

+1 我也更喜欢 DOM 属性设置而不是 HTML 字符串黑客。在这种情况下可能没有太大区别，但是在没有适当转义的情况下将 HTML 字符串组合在一起通常是一个非常糟糕的主意。