Передача параметров функции eventListener

Question

У меня есть эта функция check (e), что я хотел бы иметь возможность передавать параметры из test(), когда я добавляю его в eventListener. Это возможно? Как говорят, чтобы передать переменную mainlink через параметры. Это даже хорошо делать?

Я поставил JavaScript ниже, я также его 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

Оберните слушателя событий в функцию:

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

Answer 2

Что обычно делают в этой ситуации сохранить аргументы объекта (всякий раз, когда это удобно), а затем получить их в функция, например:

// 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, но это ведет себя по-разному в кросс-браузере. В FF это объект, на который было инициировано событие. В IE это событие. Таким образом, родилось решение srcElement/target. Мне интересно видеть другие решения, хотя есть +1.

Answer 3

Одним из решений было бы перемещение функции «проверки» внутри вашей функции test(). В качестве внутренней функции он автоматически сможет ссылаться на переменные в своей внешней области. Как это:

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