Event listener problem

[barry_normal]

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

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

"barry_normal" <[email protected]> schreef in bericht

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

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

 

[Thomas 'PointedEars' Lahn]

"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

 

[barry_normal]

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

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

No need to SHOUT around here.

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

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

Have you considered that?

See above.

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:

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

 

[barry_normal]

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

No need to SHOUT around here.

var tl_menu = document.createElement('li');
tl_menu.thingy = tls.childNodes[1].firstChild.nodeValue;
^^^^^^^
Do not augment host objects.

Have you considered that?

See above.

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:

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