奇怪的addEventListener行为
提问于 2014-03-08 10:57:10
我正在做一个基本的javascript表单验证
var seUSer = document.getElementById("seUSername");
seUser.addEventListener("blur", validator(seUsername), false);
function validator (input) {
if (input.value == "") {
input.style.color="#fff";
} else {
input.style.color="#f0f0f0";
}
}在这种情况下，我期望具体的输入改变颜色，如果它的值是空的，在用户已经预先形成的“模糊”动作之后，所以点击了，但是它改变了页面加载上的颜色--即没有用户做任何事情，默认情况下输入上的“模糊”操作吗？或者什么是正确的方法来处理这种情况。
这是jsFiddle：http://jsfiddle.net/Z4K6D/
正如您所看到的，字段从一开始就是红色的，但是只有当用户不对其进行聚焦，并且其中没有任何内容时，它才应该是红色的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-08 10:58:36
此代码：
loginUsername.addEventListener("blur", validateForm(loginUsername), false);调用 validateForm并将其返回值传递给addEventListener，这与foo(bar())调用bar并将其返回值传递给foo的方式完全相同。您不能将其设置为事件处理程序。
要将函数设置为事件处理程序，不需要调用它，只需传递对它的引用。由于您希望为函数提供一个参数，因此在本例中，您将围绕它包装一个函数：
loginUsername.addEventListener("blur", function() {
validateForm(loginUsername);
}, false);或者，让您的validateForm函数使用this而不是input参数：
document.getElementById("loginUsername").addEventListener("blur", validateForm, false);
// Note no (), we're not calling it ------------------------------------------^
function validateForm () {
if (this.value == "") {
this.style.background="#f26060";
} else {
this.style.background="#fff";
}
}在通过...because连接的事件处理程序中，this被设置为连接事件的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22273636
复制相关文章
腾讯云开发者
