eventListener関数へのパラメータの受け渡し

Question

私はこの関数のcheck（e）を使って、eventListenerにパラメータを渡すときにtest（）から渡すことができます。これは可能ですか？パラメータを渡すために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

解決策の1つは、test（）関数内で "check"関数を上に移動することです。内部関数として、自動的にその外部スコープ内の変数を参照することができます。このように：

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