JS - 通过 eventHandler 传递参数

Question

我有一个函数可以打开一个名为“openPopup()”的弹出窗口。弹出窗口有两个静态按钮：取消和提交。 openPopup() 函数的第一个参数是弹出窗口的内容。第二个参数是一个回调函数，它将绑定到提交按钮上的点击事件。问题：如果回调函数有一些参数，它们不会传递给 eventHandler。在示例中是参数“formData”：

function showPopup(content, callback) {
    // put content inside the popup
    // add a class the the popup so that it's visible
    document.getElementById("submit-btn").addEventListener( 'click', callback);
}

这是用户点击某物后运行的脚本：

formData = new FormData();
formData.append("before","popup"); // just as an example
showPopup("Hey, click me and I submit formData!>", function(formData) {
    formData.append("value","test");
    //submitting formData with Ajax...
});

“formData”不是未定义的，它没有通过事件处理程序传递。相反，格式现在是 mouseEvent。 如何更改代码以便可以访问回调函数中的“formData”？

Answer 1

参数传递行为写成addEventListener，不修改addEventListener的代码就不能改变。

但是，请注意，闭包是在函数定义时创建的。通过写作

formData = new FormData();
formData.append("before","popup"); // just as an example
showPopup("Hey, click me and I submit formData!>", function() { // no parameters
    // formData is accessible here
});

您在formData 存在时定义回调函数，因此formData 将包含在闭包中。这意味着当实际调用回调函数时，您可以访问确切的 formData。

Answer 2

您不能覆盖将 MouseEvent 作为第一个变量，但您可以这样做：

showPopup("Hey, click me and I submit formData!>", function( mouseEvent ) {

    // Your formData can be accessed from here by *this* 
    this.append("value","test");
    //submitting formData with Ajax...

}.bind( formData ));