0

I will have a large number of objects in javascript whose visual representation on the pagewill be as divs (the divs will appear and hide depending on the mouse position).

To interact with the objects, I am trying to decide between adding <button> elements (or other elements with onclick attribute) or <div>s with click listeners.

The advantage of using <div>s with click listeners is that the callback function (i.e. the click handler function) will have closure on the object corresponding to its visual representation (the parent div). Thus, when I click, it knows which object I am interacting with.

The advantage of using <button> elements (or other DOM elements with an onclick attribute) is that the page will have fewer listeners registered. But the disadvantage of using <button> elements is that its click handler function will not have closure on the object, and thus the only way to refer to the correct object is via some sort of index wherein each object possesses a unique name. An example with only 2 objects (I will have many more in my page):

var arrayOfObjects = [];

var anObj = {
    // some info about object
    this.indxInArray = arrayOfObjects.push(this);
    this.clickFunction = function() {
        // insert logic for click listener...
    };
    var that = this;
    this.theButton = $("<button type='button' onclick='arrayOfObjects["that.indxInArray"].clickFunction");
    $('anObj').append(that.theButton);
}

var anotherObj = {
    // some info about object
    this.indxInArray = arrayOfObjects.push(this);
    this.clickFunction = function() {
        // insert logic for click listener...
    };
    var that = this;
    this.theButton = $("<button type='button' onclick='arrayOfObjects["that.indxInArray"].clickFunction");
    $('anotherObj').append(that.theButton);
}


// ... HTML stuff:
<div id='anObj'>
</div>

<div id='anotherObj'>
</div>

The button way seems like a dirty and tedious way of referring to javascript objects in the DOM, but it does save a whole bunch of click listeners.

My question is: does having many registered event listeners slow down performance significantly? Would this performance impact disappear while the parent element holding the registered element is hidden?

2 Answers 2

0

EDIT: (since I'm not sure how many listeners you're talking about:) If you have under 10 listeners, I would go with that. Otherwise, it could slow down browser performance, so I would go with the button approach.

But if you're listening for clicks, couldn't you do what you want to with "onclick"? That would definitely be the fastest way.

1
  • I am using onclick with the buttons, which doesn't give me closure on the object. The same issue would arise if I used onclick on an other element (like a div).
    – achow
    Sep 16, 2011 at 1:15
0

You really should post working code. As far as I can tell here is what you actually want to do with buttons:

(Oh, and You are putting an incorrect array index into an in-line listener).

var arrayOfObjects = [];
var oButton = document.createElement('button');

var anObj = {
    // some info about object
    // Push returns the new legnth of the array, so your indexes will be out by 
    // one unless you subtract 1.
    this.indxInArray = arrayOfObjects.push(this) - 1;
    this.clickFunction = function() {
        // insert logic for click listener...
    };

    // Clone is a (better in my view) alternative to innerHTML
    this.theButton = oButton.cloneNode(false);
    this.theButton.onclick = arrayOfObjects[this.indxInArray].clickFunction;
    document.getElementById9('anObj').appendChild(this.theButton);
}

But I don't understand why you are using this approach at all. Just put listeners on the divs, it has no effect on performance if there are lots of them, the only overhead is in attaching them in the first place.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.