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()) 调用的方式完全相同 {{1并将其返回值传递给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被设置为您挂钩事件的元素。

奇怪的addEventListener行为

1 个答案: