Mouse events, classes, handlers

fuubaa · Feb 17, 2006

This below would be my ideal code.... if it worked.

<html><head><script>

function mouseDownClass(o){

this.o = o;

this.handleMouseUp = function() {
alert(this);

}
//treating this section as the constructor (which sets up the mouseup
listener as the method of an instantiation, ideally)
document.body.addEventListener("mouseup",this.handleMouseUp,false);

}

</script></head><body>

<button id="b1" onmousedown="new mouseDownClass(this,event)">Down
-> Up</button>

</body></html>

alert() is showing 'this' to as: [object HTMLBodyElement] whereas i'm
looking for it to show [object Object], (On Firefox at least),
referring to the object instantiated when the mouse goes down on the
button. I'd appreciate anyone who can help me here?
Thanks in advance
Jody

Thomas 'PointedEars' Lahn · Feb 17, 2006

fuubaa said:
This below would be my ideal code.... if it worked.

Since it is fantasy code, it cannot work.

<html><head><script>

Not at all Valid. said:
function mouseDownClass(o){

There are no classes in the used ECMAScript implementation, BTW.

this.o = o;

this.handleMouseUp = function() {
alert(this);

}
//treating this section as the constructor

Nonsense. `mouseDownClass' is the constructor of the object created with
the NewExpression.

(which sets up the mouseup listener as the method of an instantiation, ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ideally)

Nonsense. It adds the Function object referred to by this.handleMouseUp
(that could have been any other Function object as well, it would not have
make a difference) as event listener for the `mouseup' event.

document.body.addEventListener("mouseup",this.handleMouseUp,false);

}

</script></head><body>

<button id="b1" onmousedown="new mouseDownClass(this,event)">Down
-> Up</button>

So when the `mousedown' event occurs for the `button' element as event
target, you create a new object. Which is completely unnecessary.

And said:
alert() is showing 'this' to as: [object HTMLBodyElement]

And rightfully so. You added the event listener to the element
represented by the element object referred to with `document.body'.
When its `mouseup' event occurs, the Function code is called by
this object. And `this' refers to the caller in function code.

whereas i'm looking for it to show [object Object],

function ...(...)
{
var me = this;

this.handleMouseUp = function()
{
alert(me);
}

...
}

Note that this creates a closure involving DOM objects which is
prone to the IE memory leak problem.

PointedEars

Problems with using event handlers for button and textarea input	1	Nov 29, 2021
Mouse events using Javascript with SVG	6	Jul 9, 2007
Why do mouseup events sometimes fire if the mouse is not released?	2	May 6, 2008
onmouseup isn't always triggered when mouse button is released	11	Aug 26, 2008
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Mouse events, images and document bounds	0	Jul 12, 2006
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
attaching mouse events to a flash object	0	Dec 17, 2006

Mouse events, classes, handlers

fuubaa

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads