如何为 addEventListener 的函数添加更多参数？ - Javascript

Question

我在使用 uploadDisplay_SP_reply_'.$statusid.' 时遇到问题 正如您所看到的，这些 div 具有唯一的 id ($statusid)，它是自动递增的，因此如果我想在 Javascript addEventListener 的函数中的特定 div 内显示图像，程序将不知道应该在哪个 div 中显示图像。这是我的问题。在其他函数中，我可以添加这个唯一的 id，例如 PHP 中的 (replytext_'.$statusid.') 和 Javascript 中的 function showBtnDiv_reply(e)，其中 e 是 $statusid，但在 function completeHandler_reply 中我不能。 function completeHandler_reply 仅从 addEventListener 中获取一个参数，即 event。那么如何将$statusid 添加到function completeHandler_reply 或者有什么办法可以解决？

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：

我可以在这里添加$statusid作为参数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);    
}

但在这里我不能将$statusid 添加为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";
}

我试过了，但对我没用。

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

Answer 1

您可以在 eventListener 中使用匿名函数，然后从该函数中调用实际函数。

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

传入任何合适的参数~我以arg1等为例

Answer 2

改用匿名函数怎么样？试试这个：

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