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.listen('form-id');

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

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

是我的模块设置有问题吗？

解决我的问题的最佳方法是什么？

谢谢

Answer 1

我已经将我的计算器更新为 class，这似乎可以正常工作了。

欢迎任何改进！

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

addEventListener 为同一个表单触发多次

addEventListener firing multiple times for the same form

javascript

module

singleton

addeventlistener