howto install event handler

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

nstasiv@gmail.com - 31 Aug 2006 14:49 GMT

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

Reply to this Message

Richard Cornford - 31 Aug 2006 15:22 GMT

<snip>

>     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.

Reply to this Message

nstasiv@gmail.com - 31 Aug 2006 15:36 GMT

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!

> <snip>
> > this.obj.onmousedown = function(evt){
[quoted text clipped - 16 lines]
>
> Richard.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / August 2006

howto install event handler