Parameter an die eventListener-Funktion übergeben

Question

Ich habe diese Funktion prüfen (e), dass ich Parameter von test() übergeben könnte, wenn ich es zum eventListener hinzufügen. Ist das möglich? Wie gesagt, um die Mainlink-Variable durch die Parameter zu leiten. Ist das überhaupt gut zu tun?

ich das Javascript unten setzen, ich habe es auch auf 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

Wickeln Sie Ihre Ereignis-Listener in eine Funktion:

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

Answer 2

Was ich in dieser Situation normalerweise tun ist, Argument für das Objekt speichern (wann immer es bequem ist), und sie dann in dem abrufen Funktion, wie folgt aus:

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

Dies ist Cross-Browser und ermöglicht es, Objekte und Werte durch die Eigenschaften des Ereignisziel zu übergeben.

Ich begann zunächst mit dem this Schlüsselwort, aber das verhält sich anders über den Browser. In FF ist das Objekt, auf das das Ereignis ausgelöst wurde. In IE ist es das Ereignis selbst. So entstand die srcElement/target Lösung. Ich bin daran interessiert, die anderen Lösungen zu sehen - haben Sie eine +1.

Answer 3

Eine Lösung wäre, die Funktion "check" in der Funktion test() zu verschieben. Als innere Funktion könnte sie automatisch auf Variablen in ihrem äußeren Umfang verweisen. Wie folgt aus:

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