How to efficiently register a DOM event with a specific JavaScript object instance

Question

In my web application I have a custom object which I've defined with an object function constructor and applied various shared properties through the constructors prototype.

MyObject = function (Name) {
  this.Name = Name;
  this.ListItem1 = document.createElement('li');
  this.ListItem1.onclick = this.SetActive;
  this.ListItem2 = document.createElement('li');
  this.ListItem2.onclick = this.SetActive;
}

MyObject.prototype.SetActive = function () {
  alert('SetActive: ' + this.Name);
}

Now this is a simplified example, my actual object has many more DOM elements attached to it, and each of those DOM elements have many different event listeners. My object also has many other properties and methods as well. I could also potentially have thousands of instances of this object, so code efficiency is important.

My issue right now is that when a DOM event is triggered, the event handler's 'this' property is set to the actual DOM element, not my object instance.

For example:

var HelloObj = new MyObject('Hello');
HelloObj.SetActive();    
    //This alerts 'SetActive: Hello'

HelloObj.ListItem1.click();    
    //This alerts 'SetActive: undefined' because 'this' in SetActive
    //becomes ListItem1 and obviously ListItem1.Name is undefined

So how can I set the DOM element's event handlers to a function pointer (not a new function instance for each event handler which would be inefficient when there's a large number of object instances) but still retain the context of the object instance itself in regards to 'this'?

Artyom Neustroev · Accepted Answer · 2013-03-28 16:44:31Z

1

Try out bind() like this:

this.ListItem1.onclick = this.SetActive.bind(this); 
//and so on

answered Mar 28, 2013 at 16:44

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1084447 Over a year ago

I forgot about bind(), good call. The only issue with doing it like this is that bind() creates a new function, so if I were to assign each event handler like this I would be creating a new function for each event handler which is exactly what I'm trying to avoid. I'm thinking there might be way to use bind in the object prototype to achieve what I'm looking for though...

Artyom Neustroev Over a year ago

@user1084447 I'm sure there is a way, however I think you would have to reorganize your code to achieve such goal.

user1084447 Over a year ago

I'm wide open to some restructuring at this point. Maximizing efficiency in this situation is going to be integral to achieving the performance I'm going to need for this project. Any ideas?

Artyom Neustroev Over a year ago

Hard to come out with useful ideas on the go. Using prototype is already a great approach.

user1084447 · Accepted Answer · 2013-03-28 18:56:59Z

The solution I've come up with and am using for now is to attach a reference to the object instance to the DOM element and then using a wrapper function for the event handlers to call the desired function through that reference:

MyObject = function (Name) {
  this.Name = Name;

  this.ListItem1 = document.createElement('li');
  this.ListItem1.Context = this;
  this.ListItem1.onclick = this.SetActiveHandler;

  this.ListItem2 = document.createElement('li');
  this.ListItem2.Context = this;
  this.ListItem2.onclick = this.SetActiveHandler;
}

MyObject.prototype.SetActiveHandler = function () {
  this.Context.SetActive();
}
MyObject.prototype.SetActive = function () {
  alert('SetActive: ' + this.Name);
}

This solves all of my problems, although I'm not completely satisfied as there are a few pitfalls. Visually it's just not as pretty and is more convoluted. Programmatically it creates a circular reference which I know is generally frowned upon, although in my situation I don't think it should cause any issues as I'm only worried about modern browsers, and I believe the circular reference is fully contained such that if all of the DOM elements have been removed from the document and I delete my reference to the instance of MyObject itself everything should be fully garbage collected (some feedback on this would be greatly appreciated). And I know it's also considered bad practice to attach custom properties to a DOM element, although I don't know if that's still an issue with modern browsers (again, some feedback would be great). It also breaks the object-oriented flow a little bit having to go though a second function, I would have liked to attach the event handler directly to SetActive().

Does anybody have any other solutions or could shed some light on whether or not I'm actually creating more problems than I'm solving?

Collectives™ on Stack Overflow

How to efficiently register a DOM event with a specific JavaScript object instance

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related