Passing parameters to eventListener function

Question

I have this function check(e) that I'd like to be able to pass parameters from test() when I add it to the eventListener. Is this possible? Like say to get the mainlink variable to pass through the parameters. Is this even good to do?

I put the javascript below, I also have it on jsbin: http://jsbin.com/ujahe3/9/edit

function test() {
  if (!document.getElementById('myid')) {
  var mainlink = document.getElementById('mainlink');
  var newElem = document.createElement('span');
  mainlink.appendChild(newElem);
  var linkElemAttrib = document.createAttribute('id');
  linkElemAttrib.value = "myid";
  newElem.setAttributeNode(linkElemAttrib);

  var linkElem = document.createElement('a');
  newElem.appendChild(linkElem);

  var linkElemAttrib = document.createAttribute('href');
  linkElemAttrib.value = "jsbin.com";
  linkElem.setAttributeNode(linkElemAttrib);

  var linkElemText = document.createTextNode('new click me');
  linkElem.appendChild(linkElemText);

  if (document.addEventListener) {
  document.addEventListener('click', check/*(WOULD LIKE TO PASS PARAMETERS HERE)*/, false);                       
  };
};
};

function check(e) {
  if (document.getElementById('myid')) {
    if (document.getElementById('myid').parentNode === document.getElementById('mainlink')) {
      var target = (e && e.target) || (event && event.srcElement); 
      var obj = document.getElementById('mainlink'); 
      if (target!= obj) {
        obj.removeChild(obj.lastChild);
      };
    };
  };
};

Answer 1

Wrap your event listener into a function:

document.addEventListener( 
          'click', 
           function(e,[params]){
              check(e,[params]);
           } 
);

Answer 2

What I typically do in this situation is save arguments to the object (whenever it's convenient), and then retrieve them in the function, like this:

// Listener function receives e (the event object) by default.
function eventReceiver(e) {  
  var obj;

  // Find object which triggered the event
  e.srcElement ? obj = e.srcElement : obj = e.target;

  // obj.someProperty has been set elsewhere, replacing a function parameter
  alert(obj.someProperty);   
}

This is cross browser, and allows you to pass objects and values through the properties of the event target.

I initially started with the this keyword, but that behaves differently cross-browser. In FF, it's the object that the event was triggered on. In IE, it's the event itself. Thus, the srcElement / target solution was born. I'm interested to see the other solutions though - have a +1.

Answer 3

One solution would be to move the "check" function up inside your test() function. As an inner function, it would automatically be able to refer to variables in its outer scope. Like this:

function test() {
  if (!document.getElementById('myid')) {
  var mainlink = document.getElementById('mainlink');
  var newElem = document.createElement('span');
  mainlink.appendChild(newElem);
  var linkElemAttrib = document.createAttribute('id');
  linkElemAttrib.value = "myid";
  newElem.setAttributeNode(linkElemAttrib);

  var linkElem = document.createElement('a');
  newElem.appendChild(linkElem);

  var linkElemAttrib = document.createAttribute('href');
  linkElemAttrib.value = "jsbin.com";
  linkElem.setAttributeNode(linkElemAttrib);

  var linkElemText = document.createTextNode('new click me');
  linkElem.appendChild(linkElemText);

  if (document.addEventListener) {
  document.addEventListener('click', function(e) {

    if (document.getElementById('myid')) {
      if (document.getElementById('myid').parentNode === mainlink) {
        var target = (e && e.target) || (event && event.srcElement); 

        if (target!= mainlink) {
          mainlink.removeChild(mainlink.lastChild);
        };
      };
    };
  });
};