Javascript addEventListener不会附加到元素

我正在尝试将事件侦听器设置为提交按钮。使用console.log和chrome的webtools，我可以验证在调用

addEventListener

时“submitButton”元素是否为null，并正确引用DOM元素。我还可以验证processLogin是否为null（作为函数返回）。processLogin函数似乎甚至没有启动（我从未收到警报，页面也会刷新，因此

event.preventDefault

不起作用），我不相信

addEventListener

首先会附加该函数

下面是我的代码

//variables
var usernameField = document.getElementById('loginField_username_textbox');
var passwordField = document.getElementById('loginField_password_textbox');
var submitButton = document.getElementById('loginButton');

//event listeners
submitButton.addEventListener('submit', processLogin);
console.log(submitButton,processLogin);

//functions
function processLogin(event){
    event.preventDefault();
    alert('Username: ' + usernameField.value + ', Password: ' + passwordField.value);
}

在

表单中单击“提交”按钮将触发按钮的
单击事件，然后表单的
提交事件将触发。按钮不会触发
submit
事件。因此，您必须在按钮的单击事件上
preventDefault
：


document.querySelector（'button'）。addEventListener（'click'，（e）=>{
log（“默认阻止”）；
e、 预防默认值（）；
});

提交
在
表单中单击“提交”按钮将触发按钮的
单击事件，然后表单的
提交事件将触发。按钮不会触发
submit
事件。因此，您必须在按钮的单击事件上
preventDefault
：


document.querySelector（'button'）。addEventListener（'click'，（e）=>{
log（“默认阻止”）；
e、 预防默认值（）；
});

提交
HTML
HTML
@CertainPerformance我的印象是submit按钮也会触发
submit
事件？但是，即使我将事件侦听器设置为表单元素，也不会发生任何事情。@Isaac确实会触发
submit
事件，但会在表单上，而不是按钮上触发itself@CertainPerformance事实上，这似乎确实解决了问题。多谢各位@CertainPerformance我的印象是submit按钮也会触发
submit
事件？但是，即使我将事件侦听器设置为表单元素，也不会发生任何事情。@Isaac确实会触发
submit
事件，但会在表单上，而不是按钮上触发itself@CertainPerformance事实上，这似乎确实解决了问题。非常感谢你！这似乎解决了问题。我会尽快接受答案。谢谢。这似乎已经解决了问题。我会尽快接受答案。非常感谢。
<form onsubmit="myListener()">
  <input type="text" id="loginField_username_textbox" placeholder="email" />
  <input type="text" id="loginField_password_textbox" placeholder="password" />
  <button id="loginButton">Click Me</button>
</form>

function myListener() {
  alert('Username: ' + usernameField.value + ', Password: ' + passwordField.value)
}