SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Nov 10, 2007, 14:45 #1
- 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);
Sincerely
Marc
-
Nov 10, 2007, 20:09 #2
- Join Date
- Nov 2005
- Location
- The Netherlands
- Posts
- 808
- 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.
-
Nov 10, 2007, 22:33 #3
- 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.
-
Nov 11, 2007, 05:22 #4
- Join Date
- Nov 2005
- Location
- The Netherlands
- Posts
- 808
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm sorry.
Like this then:
Code javascript:window.addEventListener("load", function() { shout("Hello world!"); }, false);
-
Nov 11, 2007, 21:44 #5
- 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