奇怪的 addEventListener 行为

Question

我正在做一个基本的 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/

正如您所见，字段从一开始就是红色的，但只有当用户将其取消聚焦并且其中没有任何内容时，它才应该是红色的。

Answer 1

这段代码：

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";
    }
}

...因为在通过addEventListener 挂钩的事件处理程序中，this 被设置为您挂钩事件的元素。