howto install event handler

[nstasiv]

Hello,
the idea is to make object draggable with code like this

var callout = new Callout(...);
new Draggable(callout);
where new Callout(...) adds some elements to DOM tree and new Draggale
does the trick:

function Draggable(_obj){
this.obj = _obj;
this.clickedX=0;
this.clickedY=0;
this.origX=0;
this.origY=0;
this.obj.onmousedown = function(evt){
this.pickup(evt);
}
this.obj.onmouseup = function(evt){
this.dropoff(evt);
}
this.obj.onmousemove = function(evt){
this.givealift(evt);
}
}

Draggable.prototype.givealift = function(evt)...
Draggable.prototype.pickup = function(evt)...
Draggable.prototype.dropdown = function(evt)...

I used to install event handler with e.setAttribute("onmousedown",
"pickup(evt)")
and everything worked fine, then I made scripts in object oriented way
but code
this.obj.onmousedown = function(evt){
this.pickup(evt);
}
won't work as expected, please help!

Thank you
Nazar

 

[Richard Cornford]

this.obj.onmousedown = function(evt){
this.pickup(evt);
}
won't work as expected, please help!

In javascript the value of - this - is determined entirely by how a
function is called and has no relationship with how or where code that
uses it is declared/defined. When the browser calls an event handler
assigned to an event handling property of an Element it calls that
handler as a method of the Element, and so - this - is a reference to
the Element.

There are several techniques for associating DOM Element's event
handlers with javascript object instances. Many are based upon
closures:-

<URL: http://jibbering.com/faq/faq_notes/closures.html >

Richard.

 

[nstasiv]

As I understand code

this.ctl.getObject().addEventListener("mousedown",
function(evt){this.pickup(evt);}, false);

has the problem where this.pickup(evt); is called. Am I right?

If there is no easy way to do the trick I will dig into closures
subject. Thank you for help!