ansaurus

Question

addEventListener only works on last object.

Answer 1

+2 A:

    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);
    }

Lior Cohen 2009-10-28 00:04:05

+1 I also prefer the DOM property setting to the HTML string hacking. It may not make much difference in this case, but kludging HTML strings together without proper escaping is usually a really bad idea.

bobince 2009-10-28 01:59:02

Answer 2

+1 A:

To explain why Lior's code works and yours doesn't:

document.body.innerHTML +=

is always a mistake. It turns your document objects into an HTML string, adds some text to that string, then re-parses the whole HTML back in to make new document objects that replace all the old ones.

In the best case, this will work but is just a bit slow. However a worse side-effect is that any information that doesn't serialise to HTML will be completely lost. That includes form field values, JavaScript properties and references, and event listeners. So, every time you construct a color_toggle_box, you are destroying all the objects you previously had listeners on; hence the listeners will never be called.

bobince 2009-10-28 01:56:35

+1 for a very good explanation.

Lior Cohen 2009-10-28 10:19:03

Thanks. That last comment explains it: the addEventListener doesn't serialize to html, so when I use innerHtml I lose the previous calls.I appreciate the prompt response, you guys rock!

Doug Banks 2009-10-28 14:52:04

Actually, while I have someone answering questions:Suppose I want the 'otherboxclick' to be a function that does something to/with the color_toggle_box in question. I understand the otherboxclick takes an 'event' argument, from which I could get the id of the element clicked. I could use that id to get the color_toggle_box in question from some global list (like have a function that looks up boxes by id).But is there some way to use addEventListener to tie the call to a function on the right instance of a color_toggle_box, directly?

Doug Banks 2009-10-28 14:55:46

Not in addEventListener itself, but you could do it by binding a parameter to the function (or binding `this` to an object). See the bottom of http://stackoverflow.com/questions/1558065/access-event-object-in-event-handler#1558289 for more about function.bind.

bobince 2009-10-28 17:50:29

ansaurus

tags:

views:

answers:

addEventListener only works on last object.

related questions