Question

在编码的同时，我注意到我在两个回调函数中重复两次相同的代码：

document.querySelector(DOM.usernameInput).addEventListener("keydown", e => {
  if (e.keyCode === 13) {
    e.preventDefault();
    UI.events.form.password.show();
  }
});
document.querySelector(DOM.next).addEventListener('click', (e)=>{
    e.preventDefault();
    UI.events.form.password.show();
});

我试图编写一些算法来实现该目标，但仍然无法实现该目标。

Answer 1

引入一个新功能并将通用逻辑移至该功能。

请看看。

function showPassword(event) {
    event.preventDefault();
    UI.events.form.password.show();
}


document.querySelector(DOM.usernameInput).addEventListener("keydown", e => {
  if (e.keyCode === 13) {
   showPassword(e);
  }
});

document.querySelector(DOM.next).addEventListener('click', showPassword);

希望对您有所帮助。

Answer 2

将通用代码包装到一个新函数中，然后从其他函数中调用它：

function displayPassword() {
    UI.events.form.password.show();
}

document.querySelector(DOM.usernameInput).addEventListener("keydown", e => {
  if (e.keyCode === 13) {
    e.preventDefault();
    displayPassword();
  }
});

document.querySelector(DOM.next).addEventListener('click', (e)=>{
    e.preventDefault();
    displayPassword();
});

如何将click事件的回调与keydown事件的回调结合在一起？

2 个答案: