Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Event listener problem (http://www.velocityreviews.com/forums/t942122-event-listener-problem.html)

barry_normal 02-24-2011 03:23 PM

Event listener problem
 
Hello everyone,

I'm trying to get my head round the javascript event model at the
moment and just don't seem able to do what I want. Any help would be
greatly appreciated, I'm hoping it's an obvious problem...

So here's what I'm trying to do.

I have an object which creates a menu on the page, it looks a bit like
this:

function CatList(){
this.myWorkspace = new Workspace();

....

//THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT
var tl_menu = document.createElement('li');
tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;

//THEN I ADD EVENT LISENERS
tl_menu.addEventListener("mouseup", handlemouse, false);
}


//HANDLER METHOD
handlemouse function(){
var NAME_VALUE = this.thingy;
}


//I want to be able to call a function on this.myWorkspace and pass it
the value NAME_VALUE but I just can't work out how to do it! By the
time you get to the handler 'this' refers to the element which
triggered the mouse event.

You can use this.myWorkspace.createOtherStuff() as the handler but
then you can't pass in a value. Seems like catch 22.

Any insights would be wonderful. I've been plugging away at this for
what seems like hours.

All the best

BN


Tom de Neef 02-24-2011 03:30 PM

Re: Event listener problem
 
"barry_normal" <unbornbuddhamind@googlemail.com> schreef in bericht
news:69f384c4-e706-4466-bcad-6d393ab51055@t8g2000vbd.googlegroups.com...
> Hello everyone,
>
> I'm trying to get my head round the javascript event model at the
> moment and just don't seem able to do what I want. Any help would be
> greatly appreciated, I'm hoping it's an obvious problem...
>
> So here's what I'm trying to do.
>
> I have an object which creates a menu on the page, it looks a bit like
> this:
>
> function CatList(){
> this.myWorkspace = new Workspace();
>
> ...
>
> //THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT
> var tl_menu = document.createElement('li');
> tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;
>
> //THEN I ADD EVENT LISENERS
> tl_menu.addEventListener("mouseup", handlemouse, false);
> }
>
>
> //HANDLER METHOD
> handlemouse function(){
> var NAME_VALUE = this.thingy;
> }
>

Javascript is not my thing, but shouldn't above be
function handlemouse() instead?
Tom



barry_normal 02-24-2011 03:34 PM

Re: Event listener problem
 
On Feb 24, 3:30*pm, "Tom de Neef" <tden...@qolor.nl> wrote:
> "barry_normal" <unbornbuddham...@googlemail.com> schreef in berichtnews:69f384c4-e706-4466-bcad-6d393ab51055@t8g2000vbd.googlegroups.com...
>
>
>
>
>
>
>
> > Hello everyone,

>
> > I'm trying to get my head round the javascript event model at the
> > moment and just don't seem able to do what I want. Any help would be
> > greatly appreciated, I'm hoping it's an obvious problem...

>
> > So here's what I'm trying to do.

>
> > I have an object which creates a menu on the page, it looks a bit like
> > this:

>
> > function CatList(){
> > this.myWorkspace = new Workspace();

>
> > ...

>
> > //THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT
> > var tl_menu = document.createElement('li');
> > tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;

>
> > //THEN I ADD EVENT LISENERS
> > tl_menu.addEventListener("mouseup", handlemouse, false);
> > }

>
> > //HANDLER METHOD
> > handlemouse function(){
> > var NAME_VALUE = this.thingy;
> > }

>
> Javascript is not my thing, but shouldn't above be
> function handlemouse() instead?
> Tom


Hi Tom, sorry I was paraphasing. I've tried it just about every which
way. Here it should have been either as you have it or handlemouse =
function(){...}

Thomas 'PointedEars' Lahn 02-24-2011 04:40 PM

Re: Event listener problem
 
barry_normal wrote:

> I'm trying to get my head round the javascript event model


There is no such thing. The DOM is a language-independent API.

> I have an object which creates a menu on the page, it looks a bit like
> this:
>
> function CatList(){
> this.myWorkspace = new Workspace();
>
> ...
>
> //THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT
> var tl_menu = document.createElement('li');
> tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;

^^^^^^^
Do not augment host objects.

> //THEN I ADD EVENT LISENERS
> tl_menu.addEventListener("mouseup", handlemouse, false);
> }
>
>
> //HANDLER METHOD
> handlemouse function(){
> var NAME_VALUE = this.thingy;
> }


This is a syntax error, so your function will never be declared, the
associated "function variable" (so to speak) never be instantiated (see
ES3/5, section 10), and the addEventListener() call above must throw a
ReferenceError (which has nothing to do with events).


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Thomas 'PointedEars' Lahn 02-24-2011 04:43 PM

Re: Event listener problem
 
barry_normal wrote:

> "Tom de Neef" wrote:
>> "barry_normal" [wrote]:
>> > //HANDLER METHOD
>> > handlemouse function(){
>> > var NAME_VALUE = this.thingy;
>> > }

>>
>> Javascript is not my thing, but shouldn't above be
>> function handlemouse() instead?

>
> Hi Tom, sorry I was paraphasing. I've tried it just about every which
> way. Here it should have been either as you have it or handlemouse =
> function(){...}


Please stop wasting everybody's time and post *the relevant parts* of the
*real code* that has problems. If you think it would be too large, post its
public URI along with some explanations if necessary.

<http://jibbering.com/faq/#posting>


PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

barry_normal 02-24-2011 04:49 PM

Re: Event listener problem
 
On Feb 24, 4:40*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> barry_normal wrote:
> > I'm trying to get my head round the javascript event model

>
> There is no such thing. *The DOM is a language-independent API.
>
> > I have an object which creates a menu on the page, it looks a bit like
> > this:

>
> > function CatList(){
> > this.myWorkspace = new Workspace();

>
> > ...

>
> > //THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT
> > var tl_menu = document.createElement('li');
> > tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;

>
> * * * * *^^^^^^^
> Do not augment host objects.
>
> > //THEN I ADD EVENT LISENERS
> > tl_menu.addEventListener("mouseup", handlemouse, false);
> > }

>
> > //HANDLER METHOD
> > handlemouse function(){
> > var NAME_VALUE = this.thingy;
> > }

>
> This is a syntax error, so your function will never be declared, the
> associated "function variable" (so to speak) never be instantiated (see
> ES3/5, section 10), and the addEventListener() call above must throw a
> ReferenceError (which has nothing to do with events).
>
> PointedEars
> --
> * * realism: * *HTML 4.01 Strict
> * * evangelism: XHTML 1.0 Strict
> * * madness: * *XHTML 1.1 as application/xhtml+xml
> * * * * * * * * * * * * * * * * * * * * * * * * * * -- Bjoern Hoehrmann


Hello Thomas, a very comprehensive reply there, thanks.

Though it doesn't address the actual problem. The syntax error was a
typo from my paraphrasing.

Essentially I want the handler method:

> //HANDLER METHOD
> handlemouse = function(){
> var NAME_VALUE = this.thingy;
> }



to call a function on another object owned by the function which
created the objects to which the listeners listen and pass in a value
which they hold.

I'm looking at this as a solution but it doesn't appear to help much:

trigger_items[z].onClick = this.addTimeline(trigger_items[z].thingy);

trigger items being menu items that have been clicked on. I want to
take their thingy property and use that to create other things
elsewhere. Any thoughts?

Cheers

BN





Thomas 'PointedEars' Lahn 02-24-2011 05:08 PM

Re: Event listener problem
 
barry_normal wrote:

> Thomas 'PointedEars' Lahn wrote:
>> barry_normal wrote:
>> > I have an object which creates a menu on the page, it looks a bit like
>> > this:

>>
>> > function CatList(){
>> > this.myWorkspace = new Workspace();

>>
>> > ...


This part is neither referred to in your code nor explained in your posting,
so it should have been omitted.

>> > //THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT


No need to SHOUT around here.

>> > var tl_menu = document.createElement('li');
>> > tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;

>>
>> ^^^^^^^
>> Do not augment host objects.


Have you considered that?

>> > //THEN I ADD EVENT LISENERS


See above.

>> > tl_menu.addEventListener("mouseup", handlemouse, false);
>> > }

>>
>> > //HANDLER METHOD
>> > handlemouse function(){
>> > var NAME_VALUE = this.thingy;
>> > }

>>
>> This is a syntax error, so your function will never be declared, the
>> associated "function variable" (so to speak) never be instantiated (see
>> ES3/5, section 10), and the addEventListener() call above must throw a
>> ReferenceError (which has nothing to do with events).

>
> Hello Thomas, a very comprehensive reply there, thanks.


Much in contrast to yours. Please learn to post as recommended before.

> Though it doesn't address the actual problem.


Blame yourself.

> The syntax error was a typo from my paraphrasing.


I do not think deliberately posted pseudo-code still qualifies as a typo.

> Essentially I want the handler method:
>
>> //HANDLER METHOD
>> handlemouse = function(){
>> var NAME_VALUE = this.thingy;
>> }


Is that real code? If not, it is irrelevant. If yes, did you also
*declare* `handlemouse' (`var' statement)?

> to call a function on another object owned by the function which
> created the objects to which the listeners listen and pass in a value
> which they hold.


The function above calls no other function. See above.

> I'm looking at this as a solution but it doesn't appear to help much:
>
> trigger_items[z].onClick = this.addTimeline(trigger_items[z].thingy);


It needs to be `onclick', and the value right-hand side must be a Function
reference. Perhaps as a first step you want to write

trigger_items[z].onclick = function() {
this.addTimeline(trigger_items[z].thingy);
};

instead. (But *do consider* my remark about host objects.)

> trigger items being menu items that have been clicked on. I want to
> take their thingy property and use that to create other things
> elsewhere. Any thoughts?


I am not ready to make wild guesses just yet.


PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

barry_normal 02-24-2011 05:53 PM

Re: Event listener problem
 
On Feb 24, 5:08*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> barry_normal wrote:
> > Thomas 'PointedEars' Lahn wrote:
> >> barry_normal wrote:
> >> > I have an object which creates a menu on the page, it looks a bit like
> >> > this:

>
> >> > function CatList(){
> >> > this.myWorkspace = new Workspace();

>
> >> > ...

>
> This part is neither referred to in your code nor explained in your posting,
> so it should have been omitted.
>
> >> > //THEN CatList CREATES SOME MENUS AND ADDS THEM TO THE DOCUMENT

>
> No need to SHOUT around here.
>
> >> > var tl_menu = document.createElement('li');
> >> > tl_menu.thingy = tls[b].childNodes[1].firstChild.nodeValue;

>
> >> ^^^^^^^
> >> Do not augment host objects.

>
> Have you considered that?
>
> >> > //THEN I ADD EVENT LISENERS

>
> See above.
>
> >> > tl_menu.addEventListener("mouseup", handlemouse, false);
> >> > }

>
> >> > //HANDLER METHOD
> >> > handlemouse function(){
> >> > var NAME_VALUE = this.thingy;
> >> > }

>
> >> This is a syntax error, so your function will never be declared, the
> >> associated "function variable" (so to speak) never be instantiated (see
> >> ES3/5, section 10), and the addEventListener() call above must throw a
> >> ReferenceError (which has nothing to do with events).

>
> > Hello Thomas, a very comprehensive reply there, thanks.

>
> Much in contrast to yours. *Please learn to post as recommended before.
>
> > Though it doesn't address the actual problem.

>
> Blame yourself.
>
> > The syntax error was a typo from my paraphrasing.

>
> I do not think deliberately posted pseudo-code still qualifies as a typo.
>
> > Essentially I want the handler method:

>
> >> //HANDLER METHOD
> >> handlemouse = function(){
> >> var NAME_VALUE = this.thingy;
> >> }

>
> Is that real code? *If not, it is irrelevant. *If yes, did you also
> *declare* `handlemouse' (`var' statement)?
>
> > to call a function on another object owned by the function which
> > created the objects to which the listeners listen and pass in a value
> > which they hold.

>
> The function above calls no other function. *See above.
>
> > I'm looking at this as a solution but it doesn't appear to help much:

>
> > trigger_items[z].onClick = this.addTimeline(trigger_items[z].thingy);

>
> It needs to be `onclick', and the value right-hand side must be a Function
> reference. *Perhaps as a first step you want to write
>
> * trigger_items[z].onclick = function() {
> * * this.addTimeline(trigger_items[z].thingy);
> * };
>
> instead. *(But *do consider* my remark about host objects.)
>
> > trigger items being menu items that have been clicked on. I want to
> > take their thingy property and use that to create other things
> > elsewhere. Any thoughts?

>
> I am not ready to make wild guesses just yet.
>
> PointedEars
> --
> var bugRiddenCrashPronePieceOfJunk = (
> * * navigator.userAgent.indexOf('MSIE 5') != -1
> * * && navigator.userAgent.indexOf('Mac') != -1
> ) *// Plone, register_function.js:16


Thanks Thomas, what did you mean about host object? What is a host
object?

Cheers

BN


All times are GMT. The time now is 11:27 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.