By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,608 Members | 3,801 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,608 IT Pros & Developers. It's quick & easy.

adding event inside a object constructor

P: 8
Hi.

I want to add an event handler inside a function that will be used has an object constructor. The event handler to be added is an "method" of the object.

if i do this:

Expand|Select|Wrap|Line Numbers
  1. function Someobj(element) {
  2.  this.num = 1;
  3.  this.inc = function() {
  4.   ++this.num;
  5.  }
  6.  this.element = element;
  7.  element.addEventListener('click', function(event) { this.inc(); }, false);
  8. }
  9. var so1 = new Someobj(document.getElementById('Photo1'));
  10. var so2 = new Someobj(document.getElementById('Photo2'));
  11.  
This gives an exception. The problem is then the event listener is called the "this" reference is no longer the object but it is the html element that generated the event.

if i declare a local var to store the this reference so the function in the event handler can find the correct object, something like this:
Expand|Select|Wrap|Line Numbers
  1. function Someobj(element) {
  2.  var me = this;
  3.  this.num = 1;
  4.  this.inc = function() {
  5.   ++this.num;
  6.  }
  7.  this.element = element;
  8.  element.addEventListener('click', function(event) { me.inc(); }, false);
  9. }
  10. var so1 = new Someobj(document.getElementById('Photo1'));
  11. var so2 = new Someobj(document.getElementById('Photo2'));
  12.  
this will not work either because the "me" reference is always set to the last object that was created an not the object that registered the event.

How do i solve this?
Any ideas???
Oct 9 '08 #1
Share this Question
Share on Google+
4 Replies


rnd me
Expert 100+
P: 427
a little bit of this and that goes a long way.
Expand|Select|Wrap|Line Numbers
  1.  
  2. function Someobj(element) {
  3.  var that = this;
  4.  this.num = 1;
  5.  this.inc = function() {
  6.   ++this.num;
  7.  }
  8.  this.element = element;
  9.  element.addEventListener('click', function(event) { that.inc(); }, false);
  10. }
that will bring closure to the matter.
Oct 9 '08 #2

P: 8
a little bit of this and that goes a long way.
Expand|Select|Wrap|Line Numbers
  1.  
  2. function Someobj(element) {
  3.  var that = this;
  4.  this.num = 1;
  5.  this.inc = function() {
  6.   ++this.num;
  7.  }
  8.  this.element = element;
  9.  element.addEventListener('click', function(event) { that.inc(); }, false);
  10. }
that will bring closure to the matter.
I thought that if it was that way the variable "that" would behave like a static variable for the constructor function. But i tested it and it works.

Thank you.
Oct 9 '08 #3

rnd me
Expert 100+
P: 427
yes, it does work.

that's the magic of closure: variables inside of functions are preserved, even after that function returns. sub-functions defined inside the constructor have full access to variables defined in the constructor.
Oct 9 '08 #4

gits
Expert Mod 5K+
P: 5,333
yes that's a really nice and useful feature of javascript ... just a short snippet that shows how you may use it:

Expand|Select|Wrap|Line Numbers
  1. function OBJ(param) {
  2.     // a private variable = only
  3.     // accessible in the constructor
  4.     var foo = 'bar';
  5.  
  6.     // a public variable accessible 
  7.     // from everywhere as an instance-
  8.     // variable 
  9.     this.foobar = 'barfoo';
  10.  
  11.     // a privileged method that returns
  12.     // you the value of the private var
  13.     // foo
  14.     this.get_foo = function() {
  15.         return foo;
  16.     };
  17.  
  18.     // a privileged method that returns
  19.     // you the value of param that was
  20.     // passed to the constructor
  21.     this.get_param = function() {
  22.         return param;
  23.     };
  24. }
  25.  
  26. var o = new OBJ('my_foo');
  27.  
  28. // alerting the value of the instance-var
  29. alert(o.foobar);
  30.  
  31. // trying to alert the val of the private var foo
  32. alert(o.foo);
  33.  
  34. // using the privileged getters
  35. alert(o.get_foo());
  36. alert(o.get_param());
  37.  
kind regards
Oct 10 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.