javascript - addEventListener 不会附加到元素

Question

我正在尝试为提交按钮设置事件监听器。使用console.log和chrome的webtools，我可以验证'submitButton'元素在调用addEventListener时不为空，并正确引用DOM元素。我还可以验证 processLogin 不为 null(作为函数返回)。 processLogin 函数似乎甚至没有触发(我从未收到警报，并且页面刷新，因此 event.preventDefault 不起作用)，我不相信 addEventListener code> 首先附加该函数。

下面是我的代码

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

Answer 1

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

document.querySelector('button').addEventListener('click', (e) => {
  console.log('default prevented');
  e.preventDefault();
});

<form>
  <button>submit</button>
</form>

或者在表单的submit事件上:

document.querySelector('form').addEventListener('submit', (e) => {
  console.log('default prevented');
  e.preventDefault();
});

<form>
  <button>submit</button>
</form>