提问人：jrdaz14 提问时间：9/5/2023 更新时间：9/5/2023 访问量：40
如何使用 .addEventListener 正确传递参数？
How do I properly pass through a parameter using .addEventListener?
问：
我正在构建一个仅使用字母输入的注册表单，并且我正在尝试简化我的代码，以便如果将非字母字符输入到 or 中，它将输出下面的错误消息。fnamelname
目前，错误消息在输入之前出现，即使我输入字母字符也会保留。我的猜测是，我在输入任何内容之前收到错误消息，因为该函数立即调用或没有输入（因此是随后的错误），但是为什么一旦您用字母字符填充输入，这不会自行解决？addEventListenerfnamelname
我知道如何使用两个不同的函数（即分别删除参数和 using 和 ）进行编码，但我正在寻找一种适用于一个函数的简单解决方案。ABCvalidatefname.valuelname.valueABCvalidate
// First Name & Last Name Validation
let ABC = /^[A-Za-z]+$/;
let fname = document.getElementById("fname");
fname.addEventListener('input', ABCvalidate(fname));
let lname = document.getElementById("lname");
lname.addEventListener('input', ABCvalidate(lname));
function ABCvalidate(name) {
const errorElement = document.getElementById("CSerror");
if (!ABC.test(name.value)) {
errorElement.innerHTML =
"No spaces, numbers, or special characters allowed";
} else {
errorElement.innerHTML = "";
}
}
答：
2赞
Tintenfisch
9/5/2023
#1
您可以只使用匿名函数：
备选案文A
let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
fname.addEventListener('input', function() {
ABCvalidate(this);
});
lname.addEventListener('input', function() {
ABCvalidate(this);
});
您可以在此上下文中使用，而不是使用 and 作为参数，因为这将引用事件侦听器添加到的元素。fnamelnamethis
备选案文B
已经提到的所谓箭头函数表达式用户 Jaromanda X 也是可能的。你不能使用这个关键词，但你可以 - 正如 slebetman 所提到的 - 通过，因此改用：thiseventevent.target
let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
fname.addEventListener('input', (event) => ABCvalidate(event.target));
lname.addEventListener('input', (event) => ABCvalidate(event.target));
评论
0赞
slebetman
9/5/2023
恕我直言，替换的是：thisevent.targetfname.addEventListener('input',(e) => ABCvalidate(e.target))
0赞
Tintenfisch
9/5/2023
没错，我编辑了我的答案。谢谢！
评论
() => ABCvalidate(fname)ABCvalidate(fname)