Object oriented javascript & events

[b.dam@gmx.net]

I'm trying to do the following:

function row() {
this.selected = false;
this._el = document.create Element("TR");
this._el.attach Event("onClick" , this.rowClick);
}

row.prototype.r owClick = function() {
this.selected = true;
}

var r = new row();

The rowClick event doesn't work however, because "this" doesn't point
to the row object in the rowClick function. How do I get "this" to
point to the row object?

[michael elias]

Re: Object oriented javascript & events

What i do to solve this is to have your object have a unique ID. Attach
this id to any HTML elements that are part of the object. Now store the
object in a global array, indexed at it's unique ID. When the attached
function is fired, you inspect the event.srcElemen t element and extract
the id.

ex: event.srcElemen t.getAttribute( 'uid');

Now use the uid to get the object from the global array, voila

[Lasse Reichstein Nielsen]

Re: Object oriented javascript & events

b.dam@gmx.net writes:
[color=blue]
> function row() {
> this.selected = false;
> this._el = document.create Element("TR");
> this._el.attach Event("onClick" , this.rowClick);[/color]

The attachEvent method is a proprietary IE method. Amongst its other
problems, it doesn't call the function as a property of the object
it is attached to (so "this" is not set).

In comparison, the W3C version,
this.addEventLi stener("click", this.rowClick, true)
does.

Notice that it doens't matter that you write "this.rowClick" . It simply
evaluates to the function, with no reference to the "this" object. It
is the event handling that must set the object of the call.

A solution for attachEven:

var self = this;
this.attachEven t("onclick", function(){self .rowClick();})

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[philmaker]

Re: Object oriented javascript &amp; events


I've also struggled with this for a bit and think I've found the best
solution to achieve OO 'this' keyword re-entry from an event handler.
I've only tested this in Safari and so have not tested the
'attachEvent' part (IE) lately but the func.apply(obje ct) but works
fine using addEventListene r.

Philip Weaver


function EventManager() {

this.registerCl ickEvent = EventManager_Re gisterClickEven t;
}

function EventManager_Re gisterClickEven t(element, object, func) {

var f = function() {
func.apply(obje ct);
};

if (element.attach Event) {
element.attachE vent("onclick", f);
} else {
element.addEven tListener("clic k", f, false);
}
}


--
philmaker
------------------------------------------------------------------------
philmaker's Profile: http://www.highdots.com/forums/member.php?userid=219
View this thread: http://www.highdots.com/forums/showthread.php?t=1303766

[philmaker]

Re: Object oriented javascript &amp; events


Also added event passing...

function EventManager() {

this.registerCl ickEvent = EventManager_Re gisterClickEven t;
}

function EventManager_Re gisterClickEven t(element, object, func) {

var f = function(e) {
if (e == null) {
e = window.event;
}
func.call(objec t, e);
};

if (element.attach Event) {
element.attachE vent("onclick", f);
} else {
element.addEven tListener("clic k", f, false);
}
}


--
philmaker
------------------------------------------------------------------------
philmaker's Profile: http://www.highdots.com/forums/member.php?userid=219
View this thread: http://www.highdots.com/forums/showthread.php?t=1303766

[Danny]

Re: Object oriented javascript &amp; events


I could be mistaken, but looks you're reinventing the wheel? Setting a
listener for an event with a native listener method?

Danny


On Thu, 09 Jun 2005 14:54:54 -0700, philmaker
<philmaker.1qdr kf@no-mx.forums.yourd omain.com.au> wrote:
[color=blue]
>
> Also added event passing...
>
> function EventManager() {
>
> this.registerCl ickEvent = EventManager_Re gisterClickEven t;
> }
>
> function EventManager_Re gisterClickEven t(element, object, func) {
>
> var f = function(e) {
> if (e == null) {
> e = window.event;
> }
> func.call(objec t, e);
> };
>
> if (element.attach Event) {
> element.attachE vent("onclick", f);
> } else {
> element.addEven tListener("clic k", f, false);
> }
> }
>
>[/color]



--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[Michael Winter]

Re: Object oriented javascript &amp; events

On 09/06/2005 22:21, philmaker wrote:
[color=blue]
> I've also struggled with this for a bit and think I've found the best
> solution to achieve OO 'this' keyword re-entry from an event handler.[/color]

There are numerous ways, and the best depends solely on current
requirements.

[snip]
[color=blue]
> function EventManager() {
>
> this.registerCl ickEvent = EventManager_Re gisterClickEven t;
> }[/color]

If registerClickEv ent is the only property, then EventManager would be
better as an object:

var EventManager = {
registerClickEv ent : function(...) {
...
}
};
[color=blue]
> function EventManager_Re gisterClickEven t(element, object, func) {
>
> var f = function() {
> func.apply(obje ct);
> };[/color]

Or:

function f() {
func.call(objec t);
}
[color=blue]
> if (element.attach Event) {
> element.attachE vent("onclick", f);
> } else {
> element.addEven tListener("clic k", f, false);
> }
> }[/color]

This isn't good in general for a couple of reasons:

1. As the inner function, f, will survive after registerClickEv ent is
called, it will form a closure that keeps all of the arguments to
the outer function in memory. In IE, this will cause a memory leak
because element is a DOM object and not subject to JScript's
garbage collection mechanism.
2. Both the Function.protot ype.apply and .call methods are late
additions to JScript. Versions prior to 5.5 (therefore usually
IE 5.5, too) do not implement them, so the inner function will
cause a run-time error when called.
3. If a browser doesn't support the attachEvent method, it doesn't
automatically mean it supports the addEventListene r method. Indeed,
some user agents will support neither, but can have function
references assigned to event properties. As the attachEvent
mechanism doesn't set the this operator correctly, it is usually
better to avoid using it.

Many of the regulars, myself included, have posted code that will add
multiple listeners to an element, and avoid issues (1) and (3).
Emulation to avoid issue (2) is just as abundant.

As most listeners aren't useful as public methods, a variation of
Lasse's suggestion will usually do:

function MyObject() {
var self = this;

function listener() {
/* Use self to refer to the object instance and
* the this operator to refer to the element.
*/
}

this.attach = function(elemen t) {
/* Using the addEventListene r method for simplicity. */

element.addEven tListener('clic k', listener, false);
};
}

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.