Javascript seting dom event to prototype method in constructor

Question

I'm having some Javascript woes, lets say we have a constructor

function test(element) {
  this.element = element;
  this.element.onfocus = function() { this.onfocus(); }
}

test.prototype.onfocus = function() {
  alert("focused");
}

new test(document.getElementByID("E1"));

So I am trying to dynamically set the focus event inside the constructor, but it doesn't seem to work, and I can't figure it out.

Anyone help?

Thanks,

AJ

Matías Fidemraizer · Accepted Answer · 2011-07-14 10:27:27Z

1

In JavaScript, and in the context of this.element.onfocus = function() {this.onfocus(); }, second this is the element who fired the event.

In other words, your code should be like this if you want to work in a proper way:

function test(element) {
  this.element = element;

  var currentObject = this;
  this.element.onfocus = function() {currentObject.onfocus(); }
}

Don't think JavaScript is a decent object-oriented programming language, as it's prototype-oriented and it has some weak things like one that's affecting your code.

Why don't you read this article? I belive it'll clarify this keyword for you:

http://www.switchonthecode.com/tutorials/javascript-tutorial-why-the-this-keyword-breaks

edited Jul 14, 2011 at 10:27

answered Jul 14, 2011 at 10:09

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

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

2 Comments

AJ. Over a year ago

Thanks very much, this works great, I will take your advice and read the article as well.

Matías Fidemraizer Over a year ago

It's not about doing spam, but maybe you're interested in some OOP implementation I did for JavaScript and it works like a charm, as I'm using in some personal projects I'm going to release to the open source community: joopl.codeplex.com.

mck89 · Accepted Answer · 2011-07-14 10:09:12Z

1

You must store a reference to 'this', because the onfocus function is in another context and the 'this' refers to something else:

function test(element) {
  this.element = element;
  var that = this;
  this.element.onfocus = function() { that.onfocus(); }
}

answered Jul 14, 2011 at 10:09

mck89

19.3k17 gold badges93 silver badges111 bronze badges

Collectives™ on Stack Overflow

Javascript seting dom event to prototype method in constructor

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related