Event listener problem

Discussion in 'Javascript' started by barry_normal, Feb 24, 2011.

  1. barry_normal

    barry_normal Guest

    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
     
    barry_normal, Feb 24, 2011
    #1
    1. Advertising

  2. barry_normal

    Tom de Neef Guest

    "barry_normal" <> schreef in bericht
    news:...
    > 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
     
    Tom de Neef, Feb 24, 2011
    #2
    1. Advertising

  3. barry_normal

    barry_normal Guest

    On Feb 24, 3:30 pm, "Tom de Neef" <> wrote:
    > "barry_normal" <> schreef in berichtnews:...
    >
    >
    >
    >
    >
    >
    >
    > > 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(){...}
     
    barry_normal, Feb 24, 2011
    #3
  4. 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.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, Feb 24, 2011
    #4
  5. 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.)
     
    Thomas 'PointedEars' Lahn, Feb 24, 2011
    #5
  6. barry_normal

    barry_normal Guest

    On Feb 24, 4:40 pm, Thomas 'PointedEars' Lahn <>
    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.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
     
    barry_normal, Feb 24, 2011
    #6
  7. 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.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
     
    Thomas 'PointedEars' Lahn, Feb 24, 2011
    #7
  8. barry_normal

    barry_normal Guest

    On Feb 24, 5:08 pm, Thomas 'PointedEars' Lahn <>
    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.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
     
    barry_normal, Feb 24, 2011
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sasha Borodin
    Replies:
    0
    Views:
    3,099
    Sasha Borodin
    Jul 28, 2003
  2. Slobodan C

    Event listener list implementation

    Slobodan C, Jan 22, 2004, in forum: Java
    Replies:
    2
    Views:
    1,199
    Slobodan C
    Jan 23, 2004
  3. Mmm_moo_cows

    Java Event Listener integer problem.

    Mmm_moo_cows, Oct 24, 2004, in forum: Java
    Replies:
    4
    Views:
    841
    Mmm_moo_cows
    Oct 26, 2004
  4. Mike Scirocco
    Replies:
    4
    Views:
    293
    Mike Scirocco
    Apr 5, 2007
  5. carlos
    Replies:
    1
    Views:
    156
    Paul Wilkins
    Feb 16, 2008
Loading...

Share This Page