JS - 通过事件处理程序传递参数

Question

我有一个函数可以打开名为 "openPopup()" 的弹出窗口-window。弹出窗口有两个静态按钮：取消和提交。 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

您不能覆盖获取 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 ));

Answer 2

参数传递行为写成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。

JS - 通过事件处理程序传递参数

JS - Passing arguments through an eventHandler

javascript

events

callback

parameter-passing

event-handling