Question

我有一个函数来打开一个名为“openPopup（）”的弹出窗口。弹出窗口有两个静态按钮：取消和提交。 openPopup（）函数的第一个参数是弹出窗口的内容。第二个参数是一个回调函数，它将绑定到提交按钮上的click-Event。问题：如果回调函数有一些参数，它们不会传递给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”未定义，它不会通过Eventhandler传递。相反，format现在是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 - 通过eventHandler传递参数

2 个答案: