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);
      };
    };
  };
};

very nice and quick, thanks all of you for your help. Hopefully I will be able to contribute one day like yourself. — bryan sammon
– bryan sammon, Commented Dec 28, 2010 at 7:22

KooiInc · Accepted Answer · 2015-05-28 16:51:59Z

6

Wrap your event listener into a function:

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

edited May 28, 2015 at 16:51

answered Dec 28, 2010 at 6:59

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charlie Flowers · Accepted Answer · 2010-12-28 06:52:17Z

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);
        };
      };
    };
  });
};

Ben · Accepted Answer · 2010-12-28 06:55:40Z

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.

Collectives™ on Stack Overflow

Passing parameters to eventListener function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related