addEventListener 不会附加到元素

Question

我正在尝试将事件侦听器设置为提交按钮。使用 console.log 和 chrome 的 webtools，我可以验证 'submitButton' 元素在调用 addEventListener 时不为空，并正确引用 DOM元素。我还可以验证 processLogin 不为空（returns 作为函数）。 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 中的 "submit" 按钮将触发按钮的 click 事件，然后 form 的 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>

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

addEventListener 不会附加到元素

addEventListener will not attach to element

javascript

addeventlistener

onsubmit

HTML

Javascript