addEventListener为同一表单触发多次

Question

这是我的Javascript模块:

const Calculator = (function() {
return {
listen: function (formId) {
this.formId = formId;
this.calculatorForm = document.querySelector(`#form_${this.formId}`);
if (this.calculatorForm) {
this.addEventListeners();
}
},
addEventListeners: function() {
const self = this;
this.calculatorForm.addEventListener('submit', function(event) {
console.log('calculatorForm submit', self);
self.calculatorSubmission(event);
}, false);
},
calculatorSubmission: function(event) {
event.preventDefault();
console.log('Form submitted', this.calculatorForm);
}
};
})();
export default Calculator;

我使用Webpack构建所有的Javascript，所以我可以像这样加载模块:

import Calculator from './modules/calculator';

加载Javascript的页面有选项卡内容。每个选项卡包含一个不同的表单，都使用Calculator模块，所以当我在选项卡之间切换时，我调用:

Calculator.listen('form-id');

我遇到的问题是当我在标签之间切换几次。假设我查看选项卡3,5次，然后在选项卡3中填写并提交表单。表单被提交了5次，因为每次查看tab 3时都调用了addEventListener。有意义吗?

我正在努力修复它-可能是因为我已经看了几个小时了，我的头现在是糊里糊涂的。

问题是我的模块设置吗?

克服我的问题的最好方法是什么?

感谢

Answer 1

我已经更新了我的计算器为一个类，这似乎工作如预期的现在

欢迎任何改进!

class Calculator {
constructor() {
if (!Calculator.instance) {
Calculator.instance = this;
}
this.calculatorSubmissionHandler = function(event) {
Calculator.instance.calculatorSubmission(event);
};
return Calculator.instance;
}
listen(formId) {
this.formId = formId;
this.calculatorForm = document.querySelector(`#${this.formId}`);
if (this.calculatorForm) {
this.addEventListeners();
}
}
addEventListeners() {
this.calculatorForm.addEventListener('submit', this.calculatorSubmissionHandler, false);
}
calculatorSubmission(event) {
event.preventDefault();
console.log('Form submitted', Calculator.instance.formId);
}
}