javascript - 奇怪的 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 设置为您连接事件的元素。