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

**MarcMiller** · Nov 10, 2007, 14:45

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

**Ize** · Nov 10, 2007, 20:09

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.

**MarcMiller** · Nov 10, 2007, 22:33

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.

**Ize** · Nov 11, 2007, 05:22

I'm sorry.

Like this then:

Code javascript:

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

**MarcMiller** · Nov 11, 2007, 21:44

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>

The SitePoint Forums have moved.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions