467,883 Members | 1,310 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,883 developers. It's quick & easy.

adding event inside a object constructor

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
  • viewed: 4774
Share:
4 Replies
rnd me
Expert 256MB
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
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 256MB
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 4TB
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.

Similar topics

28 posts views Thread by Daniel | last post: by
10 posts views Thread by tony kulik | last post: by
34 posts views Thread by Adam Hartshorne | last post: by
9 posts views Thread by JamesB | last post: by
reply views Thread by Patrick Lioi | last post: by
6 posts views Thread by Kevin Attard | last post: by
3 posts views Thread by =?Utf-8?B?d2Vic211cmY=?= | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.