CODEWITHSUNDEEP
javascript
bryan sammon
bryan sammon

Reputation: 7441

Passing parameters to eventListener function

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

Upvotes: 3

Views: 10314

Answers (3)

KooiInc
KooiInc

Reputation: 122906

Wrap your event listener into a function:

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

Upvotes: 6

Ben
Ben

Reputation: 57207

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.

Upvotes: 0

Charlie Flowers
Charlie Flowers

Reputation: 17427

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

Upvotes: 0

Related Questions