SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Passing Arguments to Event Listeners

    Hello. I need to pass an argument to an event listener function. I tried to pass argument to event listener function in addEventListener function but it didnt work. How can I solve this problem?

    Code HTML4Strict:
    <html>
     
    <head>
     
     
    <script type="text/javascript">
    function loadfunction(event,text){
     
    alert("welcome and "+text);
     
    }
     
     
    window.addEventListener("load",loadfunction(event,"hello"),true);
     
    </script>
    </head>
     
    <body>
     
     
     
    </body>
     
    </html>

    Thanks in advance.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    window.addEventListener("load",function (e) {loadfunction(e,"hello")},true);

    Are you sure you want the third argument to be true, i.e., that you want to use this event listener in the capture phase?
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello. I am still bad at those capture and bubble phases. Does it really make big difference if it set to false for a simple page that doesnt have frames or iframes? By the way, I actually want to know methods, if there is any, to pass arguments to event listener functions without anonymous functions and without refering to global space variables?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That last argument, true, indicates whether the event will be captured while trickling down or bubbling up. The trickle down is an ancient old technique that has virtually no application these days and is kept around mainly for historical reasons. In virtually all situations you will use false to specify the bubbling phase.
    See http://www.w3.org/TR/DOM-Level-3-Eve...ml#Events-flow

    What is assigned to listen to an event is a function, so passing arguments can at times be tricky.

    The addEventListener method only works on browsers that support the W3C model, while attachEvent is used by IE browsers. So for i to work reliably, you need code like this:

    Code javascript:
    if (window.addEventListener) { // W3C
        window.addEventListener("load", loadfunction, true);
    } else if (window.attachEvent) { // IE
        window.attachEvent("onload", loadfunction);
    }

    These methods are of best use only when you intend for an elements event to mave multiple functions attached to it.

    To avoid browser model troubles you can instead use the traditional event registration technique instead.

    Code javascript:
    window.onload = loadfunction;

    For all of these, the event doesn't need to be explicitly passed to these functions (unless you're using inline event attributes). When a function is called, the this keyword refers to the element that was fired, and the event is passed automatically to the first argument, unless you're using IE where the event is instead kept in a global variable.

    Here's how that relates to the function:

    Code javascript:
    function loadfunction (evt) {
        // if the evt variable hasn't been set, use the global event object instead
        evt = evt || window.event; // W3C or IE
        // the this keyword refers to the element that fired the event
        // the target element can also be obtained from the event
        var targ = evt.target || evt.srcElement; // W3C or IE
    }
    window.onload = loadfunction;

    So what you're wanting to do is to pass arguments without using anonymous functions or global variables. Consider the loadfunction() function. It only has the this keyword and the evt object to work with. With the window.onload event, the this keyword will point to the window object, and the load event won't have any useful information.

    So without passing arguments in an anonymous function, and with no global arguments, what can you do?

    You can add properties on to the function name itself.

    Code javascript:
    loadfunction.text = 'hello';

    Functions are just objects, and in javascript objects can be very flexible. The properties that you add on to the function can then be accessed from anywhere that the function itself can be accessed.

    Code javascript:
    function loadfunction () {
    	alert("welcome and " + loadfunction.text);
    }
    loadfunction.text = 'hello';
    if (window.addEventListener) {
        window.addEventListener("load", loadfunction, true);
    } else if (window.attachEvent) {
        window.attachEvent("onload", loadfunction);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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