/    Sign up×
Community /Pin to ProfileBookmark

Accessing ‘this’ from event handler in a class

Copy linkTweet thisAlerts:
Sep 19.2006

I’m trying to encapsulate some code in a class, but I can’t access the ‘this’ object from within an event handler, since ‘this’ has the event target in it.

[code]
function MyClass() {
this.foobar=”hello”;
this.create=function() {
var newSpan=document.createElement(‘span’);
newSpan.innerHTML=’sometext’;
newSpan.onmouseup=this.SPANonmouseup;
document.body.appendChild(newSpan);
}
this.SPANonmouseup=function (e) {
alert(this.foobar);
alert(this);
}
}
[/code]

The first box reads ‘undefined’, the second reads ‘[object HTMLSpanElement]’. How can I access the class variables from an encapsulated event handler?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterSep 19.2006 — Try assigning the [b]this[/b] object to a variable before trying to reference it from within SPANonmouseup so the reference stays the same.
<i>
</i>function MyClass() {
var t=this;
this.foobar="hello";
this.create=function() {
var newSpan=document.createElement('span');
newSpan.innerHTML='sometext';
newSpan.onmouseup=this.SPANonmouseup;
document.body.appendChild(newSpan);
}
this.SPANonmouseup=function (e) {
alert(t.foobar);
}
}

I use [b]var t=this;[/b] more often than I count my fingers. ?
Copy linkTweet thisAlerts:
@bforbesauthorSep 19.2006 — Thanks, that works perfectly. I'm guessing the private variables declared using var are automatically in scope in any member function of the class. Does that sound right?
Copy linkTweet thisAlerts:
@DokSep 19.2006 — Yes it is correct but you are going about it in a wrong way.

First of all the "member functions" is declared each time an object is instantiated which is a waste of memory. The way you do it, each MyClass object has its own instance of the "create" and "SPANonmouseup" functions and this kind of defeats the whole purpose of OOP. In order to avoid this use prototype functions

[CODE]function MyClass() {
this.foobar="hello";
}

MyClass.prototype.create =
function() {
var newSpan=document.createElement('span');
newSpan.innerHTML='sometext';
newSpan.onmouseup=this.SPANonmouseup;
document.body.appendChild(newSpan);
};

MyClass.prototype.SPANonmouseup =
function() {
alert(this.foobar);
};[/CODE]
Now you also need to establish a reference between your MyClass object and your SPAN element. For now the "foobar" is only a property of the instanced MyClass object and NOT a property of the SPAN element. You have to explicitly and a reference between your object and your element. This can be done by rewritting the above to
[CODE]MyClass.prototype.create =
function() {
var newSpan=document.createElement('span');
[COLOR=DarkRed]newSpan.obj = this;[/COLOR]
newSpan.innerHTML='sometext';
newSpan.onmouseup=this.SPANonmouseup;
document.body.appendChild(newSpan);
};

MyClass.prototype.SPANonmouseup =
function() {
[COLOR=DarkRed]alert(this.obj.foobar);[/COLOR]
};[/CODE]
When the event handler is invoked the "this" keyword is refering to the SPAN element and "this.obj" is refering to the MyClass object from which it was created.
Copy linkTweet thisAlerts:
@bforbesauthorSep 21.2006 — That's very interesting. I'll try to do it like that in future. Can I still declare "var t=this" to access it from event handlers?
Copy linkTweet thisAlerts:
@DokSep 22.2006 — Depends on how you wish to use it. Can you give an example?
Copy linkTweet thisAlerts:
@bforbesauthorSep 22.2006 — Well, in the example I used initially, what if I am unable to store 'this' in the newSpan object? Then would the solution be to use 'var t=this'?
Copy linkTweet thisAlerts:
@DokSep 22.2006 — I can't think of a reason to why that should be impossible. You can add any user defined property to any object/element as far as I know.
×

Success!

Help @bforbes spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...