addEventListener将不会附加到元素

Question

我正在尝试将事件侦听器设置为“提交”按钮。使用console.log和chrome的webtools，我可以在调用addEventListener时验证'submitButton'元素是否不为空，并正确引用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);
}

Answer 1

在form中单击“提交”按钮将触发按钮的click事件，然后触发 form 的{ {1}}事件将触发。一个按钮上不会触发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();
});

Answer 2

HTML

<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>

Javascript

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