JS - Передача аргументов через eventHandler

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. Вместо этого формат теперь является 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 доступно вам, когда функция callback действительно вызывается.

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