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"one_answers"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);提交错误-正确的是form.addEventListener("submit", this.SubmitClicked);和任何其他代码？

Answer 3

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

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

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