Comment ajouter plus de paramètres aux fonctions d'addEventListener? - Javascript

Question

J'ai un problème quand je travaille avec uploadDisplay_SP_reply_'.$statusid.' Comme vous pouvez le voir ces divs a id unique ($statusid) qui est incrémentation automatique donc si je veux afficher une image dans une div spécifique dans la fonction Javascript addEventListener le programme ne sera pas savoir dans quelle div devrait-il afficher l'image. Et voici mon problème. Dans d'autres fonctions, je pourrais ajouter cet ID unique par exemple (replytext_'.$statusid.') en PHP et function showBtnDiv_reply(e) en Javascript où e est $statusid, mais dans le function completeHandler_reply je ne peux pas. Le function completeHandler_reply obtient seulement un paramètre de l'addEventListener qui est le event. Alors, comment puis-je ajouter le $statusid à function completeHandler_reply ou est-il possible de le résoudre?

PHP:

if($isFriend == true || $log_username == $u){ 
     $statuslist .= '<textarea id="replytext_'.$statusid.'" class="replytext" onfocus="showBtnDiv_reply('.$statusid.')" placeholder="Write a comment..."></textarea>'; 
     $statuslist .= '<div id="uploadDisplay_SP_reply_'.$statusid.'"></div>'; 
     $statuslist .= '<div id="btns_SP_reply_'.$statusid.'" class="hiddenStuff">'; 
      $statuslist .= '<button id="replyBtn_'.$statusid.'" class="btn_rply" onclick="replyToStatus('.$statusid.',\''.$u.'\',\'replytext_'.$statusid.'\',this)">Reply</button>'; 
      $statuslist .= '<img src="images/camera.png" id="triggerBtn_SP_reply" class="triggerBtn" onclick="triggerUpload_reply(event, \'fu_SP_reply\')" width="22" height="22" title="Upload A Photo" />'; 
     $statuslist .= '</div>'; 
     $statuslist .= '<div id="standardUpload_reply" class="hiddenStuff">'; 
      $statuslist .= '<form id="image_SP_reply" enctype="multipart/form-data" method="post">'; 
      $statuslist .= '<input type="file" name="FileUpload" id="fu_SP_reply" onchange="doUpload_reply(\'fu_SP_reply\','.$statusid.')"/>'; 
      $statuslist .= '</form>'; 
     $statuslist .= '</div>';  
     } 
    } 

Javascript:

Je peux ajouter le $statusid ici en tant que paramètre e

function showBtnDiv_reply(e){ 
    _("replytext_"+e).style.height = "130px"; 
    _("btns_SP_reply_"+e).style.display = "block"; 
} 

function doUpload_reply(id,sid){ 
    var file = _(id).files[0]; 
    if(file.name == ""){ 
     return false;  
    } 

    if(file.type != "image/jpeg" && file.type != "image/gif" && file.type != "image/png" && file.type != "image/jpg"){ 
     alert("That file type is not supported."); 
     return false; 
    } 
    _("triggerBtn_SP_reply").style.display = "none"; 
    _("uploadDisplay_SP_reply_"+sid).innerHTML = '<img src="images/rolling.gif" width="30" height="30">'; 
    var formdata = new FormData(); 
    formdata.append("stPic_reply", file); 
    var ajax = new XMLHttpRequest(); 
    ajax.addEventListener("load", completeHandler_reply, false); 
    ajax.addEventListener("error", errorHandler_reply, false); 
    ajax.addEventListener("abort", abortHandler_reply, false); 
    ajax.open("POST", "php_parsers/photo_system.php"); 
    ajax.send(formdata);  
} 

Mais ici, je ne peux pas ajouter le $statusid comme 2ème paramètre suivant à event

function completeHandler_reply(event){ 
    var data = event.target.responseText; 
    var datArray = data.split("|"); 
    if(datArray[0] == "upload_complete"){ 
     hasImage = datArray[1]; 
     _("uploadDisplay_SP_reply").innerHTML = '<img src="tempUploads/'+datArray[1]+'" class="statusImage" />'; 
    } else { 
     _("uploadDisplay_SP_reply").innerHTML = datArray[0]; 
     _("triggerBtn_SP_reply").style.display = "block"; 
    } 
} 

function errorHandler_reply(event){ 
    _("uploadDisplay_SP_reply_").innerHTML = "Upload Failed"; 
    _("triggerBtn_SP_reply").style.display = "block"; 
} 

function abortHandler_reply(event){ 
    _("uploadDisplay_SP_reply").innerHTML = "Upload Aborted"; 
    _("triggerBtn_SP_reply").style.display = "block"; 
} 

Je l'ai essayé, mais n'a pas fonctionné pour moi.

function completeHandler_reply(event,sid){ 
    _("uploadDisplay_SP_reply_"+sid); 
} 

Answer 1

Vous pouvez utiliser une fonction anonymouse dans le eventListener puis appeler la fonction réelle de l'intérieur de cette fonction.

ajax.addEventListener("load", function(event){ 
    completeHandler_reply.call(this, arg1,arg2,arg3); 
}, false); 

or 

ajax.addEventListener("load", function(event){ 
    completeHandler_reply.apply(this, [ arg1, arg2, arg3 ]); 
}, false); 

Passant tous les arguments sont appropriés ~ je arg1 etc comme un exemple

Answer 2

que diriez-vous d'utiliser la fonction anonyme à la place? essayez ceci:

ajax.addEventListener("load", function (event){ 
    _("uploadDisplay_SP_reply_"+sid); 
}, false);