Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    JavaScript events are really just function references?

    Hey all,

    I was reading a book and guy says an event is just a function reference, so you can programmatically call it like a function :
    Code:
    if (myDOMNode.onclick)
    myDOMNode.onclick();
    Here's my thing with this. How does the javascript engine know what function reference that this function reference is pointing to?

    For example, in the now defunct event model (meaning that now you typically use addeventlistener), you would have done this:
    Code:
    myDOMNode.onclick = myClickHandler;
    So obviously, myClickHandler is just an identifier pointing to a function, because you wouldn't want to call the function directly: myClickHandler() - otherwise interpreter will read that and execute it before it even sees what's on the left side of assignment.

    But how is javascript grabbing that myClickHandler and doing something with it if all onclick is is a function reference?

    Let's say you have this:
    Code:
    document.getElementById("bla").onclick = function(e) { myClickHandler(e, “John Merlino”); };
    what is javascript really doing with onclick and the anonymous function?

    For example, it's not like we are passing the anonymous function as an argument of onclick:
    Code:
    document.getElementById("bla").onclick({ myClickHandler(e, “John Merlino”));
    I'm sure there's not a built in method like this in the engine:
    onclick(fnc){
    }



    Thanks for response.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,449
    Thanks
    17
    Thanked 273 Times in 273 Posts
    Because that way of incorporating an event handler automatically includes the 'this' functionality of javascript. It's a much better method than the inline.

    http://www.quirksmode.org/js/this.html

  • Users who have thanked DrDOS for this post:

    johnmerlino (11-20-2010)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,117
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    not true. Or at least half-true.

    If you want to pass "this" to the anonymous function, you *must* do so yourself.

    Example:
    Code:
    document.getElementById("bla").onclick = function(e) { myClickHandler(e, this, “John Merlino”); };
    Now, having said that, it's really not necessary to pass this as you can always get the object that caused the event from the event object. But it's often more convenient to do so, as if you use the event object you have to write browser-sensitive code.

    **********

    By the way, the first code example there is wrong:
    Code:
    if (myDOMNode.onclick)
        myDOMNode.onclick();
    It would normally be:
    Code:
    if (myDOMNode.onclick)
        myDOMNode.click();
    That is, you simulate the *event* and that invokes the function that is referenced by the event *handler*.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    johnmerlino (11-20-2010)

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    I think you and the author meant that an event handler is a function reference.

    The event itself is defined and supplied by the interface of the client (browser) and operating system.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,117
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Yes, well said, Hoo. And if you think of it that way, you won't make the mistake of trying to invoke the event handler by doing
    Code:
         objectReference.onclick()
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Thanks links were helpful.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •