Onsubmit 事件拒绝触发

Question

所以我有这个代码。class Validationator{    constructor()    {         this.initValidation()    }    initValidation()    {        window.addEventListener("load", this.PerformOnLoad, false);    }    PerformOnLoad()    {        var form = document.querySelector("#feedbackcontainer");        form.addEventListener("onsubmit", this.SubmitClicked);    }    SubmitClicked()    {        alert("asdf");    }}我尝试过使用“submit”和“onsubmit”，但都不起作用。我已经验证查询选择器正在获取正确的表单。请原谅我是 Javascript 的初学者。事件处理者不断地打败我。

Answer 1

事件的名称不包含前缀on——该前缀仅在相应的属性名称中使用。

另外，如果使用类方法作为回调函数，则需要将其绑定到对象。否则，this方法中将是全局window对象，而不是Validationator对象。

class Validationator

{

    constructor()

    { 

        this.initValidation()

    }

    initValidation()

    {

        window.addEventListener("load", this.PerformOnLoad.bind(this), false);

    }

    PerformOnLoad()

    {

        var form = document.querySelector("#feedbackcontainer");

        form.addEventListener("submit", this.SubmitClicked.bind(this));

    }

    SubmitClicked()

    {

        alert("asdf");

    }

}

Answer 2

form.addEventListener("onsubmit", this.SubmitClicked);onsubmit 是错误的，正确的是form.addEventListener("submit", this.SubmitClicked);还有其他代码吗？

Answer 3

在PerformOnLoad()函数中不能有onsubmit事件，它只是submit。

此外，您需要bind在调用PerformOnLoad()和SubmitClicked()方法时使用。在这种情况下，最终的代码将是这样的，

class Validationator

{

    constructor()

    { 

        this.initValidation()

    }

    initValidation()

    {

        window.addEventListener("load", this.PerformOnLoad.bind(this), false);

    }

    PerformOnLoad()

    {

        var form = document.querySelector("#feedbackcontainer");

        form.addEventListener("submit", this.SubmitClicked.bind(this));

    }

    SubmitClicked()

    {

        alert("asdf");

    }

}