SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there really a way to pass parameters when using addEventListener?

    Hi
    in my previous research I learnt that you cannot pass parameters when using addEventListener. I did some sort of Google search with the words passing parameters and addEventListener. And came up with people talking in various forums, not this one, that it was not possible to pass parameters to a function evoked with addEventListener. However trying to learn how to make Firefox extensions I came across the below code which seems to do it, however I do not know if this is just a Firefox a XUL or chrome thing. So please look at the code below and give me your verdict.
    Code:
    var linuxjournal = {
      onLoad: function() {
        // initialization code
        this.initialized = true;
        this.strings = document.getElementById("linuxjournal-strings");
      },
      onMenuItemCommand: function(e) {
        var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                                      .getService(Components.interfaces.nsIPromptService);
        promptService.alert(window, this.strings.getString("helloMessageTitle"),
                                    this.strings.getString("helloMessage"));
      },
    
    };
    window.addEventListener("load", function(e) { linuxjournal.onLoad(e); }, false);
    Also if you just happen to know, is the line" onLoad: function() {" a value property pair? But pleaese do not fail answer my primary question above if you do not know the answer to the second one. So I appreciate your input.
    Sincerely
    Marc

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Marc,

    you can pass parameters using closures. You can read more about closures here: http://www.javascriptkit.com/javatutors/closures.shtml

    An example:

    Code javascript:
    // this function needs a parameter...
    function shout (text) {
      alert (text);
    }
     
    // ...however, this will not work: 
    window.onload = shout("Hello world!");
     
    // ...since it will be executed the moment that line is read.
    // By using a closure, however, you can make it work:
    window.onload = function (){
      shout ("Hello world!");
    };

    I hope that helps.

    Oh, and yes; that is indeed a value property pair. "onLoad" is the name of the property, and the function is actually the value of that property.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So are you saying you can evoke your second function in your example code with addEventListener? The second function as it stands now does not have the word addEventListener in it. Sorry but what you said above just isn't doing it for me. I can go to your link but I would like to understand what you are saying more to convince me that would be worth while.

  4. #4
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry.
    Like this then:

    Code javascript:
    window.addEventListener("load", function() { shout("Hello world!"); }, false);

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    that showed me what I needed to know.

    And you do seem to be able to pass variables to a function evoked with a addEventListener preserving the name space. The link you gave me was very good. I particularly like the line with it stated "In JavaScript, if you declare a function within another function, then the local variables can remain accessible after returning from the function you called." I saw some of the stuff on Closures before but this link was the best explaining it. The code used to prove to concept to myself is posted below if anybody's interested.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>addEventListener pass parameters</title>
    <script type="text/javascript" charset="utf-8">
    var theText = "global Hello world!";// global name space	
    function shout (text) {
      alert (text);
    };	
    function shoutGlobal() {alert (theText);};	
    //refStartTest.addEventListener("click", function() { shout(theText); }, false);
    window.onload = function(){
    var theText = "local Hello world!";// onload name space	
    var refStartTest = document.getElementById('startTest');
    var refStartTestglobal = document.getElementById('startTestglobal');	
    refStartTest.addEventListener('click', function(){ shout(theText); },true);	
    refStartTestglobal.addEventListener('click', shoutGlobal,true);	
    };
    </script>		
    </head>
    
    <body>
    <a href="#" id="startTest" >test local var<a><br/>
    <a href="#" id="startTestglobal" >test global var<a>	
    </body>
    </html>


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
  •