意外的Javascript DOM事件侦听器问题

我创建了一个检查两个密码字段的函数，但是当我修复输入时，只有一个字段获得成功类，而另一个没有；为了使这两个字段都具有success类，您必须单击back使其更新。我可以使用什么DOM事件立即更新此文件

window.onload = addListeners;

function addListeners() {

    if(window.addEventListener) {
        _('pass1').addEventListener("blur", checkPassword, false);
        _('pass2').addEventListener("blur", checkPassword, false);
    } else if (window.attachEvent) {
        _('pass1').attachEvent("onblur", checkPassword);
        _('pass2').attachEvent("onblur", checkPassword);
    }

}

// Index pages field checker
function checkPassword() {

    var p1Val = _("pass1").value;
    var p2Val = _("pass2").value;

    var p1 = _("pass1");
    var p2 = _("pass2");

    if(p1Val != p2Val) {
        this.className = this.className.replace( /(?:^|\s)suSuccess(?!\S)/g , '' );
        this.className += " suError";
        _("pass2Check").innerHTML = "Your password fields do not match";
    } else if (p1Val == "" && p2Val == ""){
        p1.className = p1.className.replace( /(?:^|\s)suSuccess(?!\S)/g , '' );
        p2.className = p2.className.replace( /(?:^|\s)suSuccess(?!\S)/g , '' );
        p1.className += " suError";
        p2.className += " suError";
        _("pass2Check").innerHTML = "Fill in both password fields";
    } else {
        this.className = this.className.replace( /(?:^|\s)suError(?!\S)/g , '' );
        this.className += " suSuccess";
        _("pass2Check").innerHTML = "Your password fields match";
    }
}

---

问题是，当验证成功以及值不匹配时，您只对触发事件的元素执行操作，而其他输入保持不变，直到您在处理程序上触发它为止

按如下方式更改您的功能：

function checkPassword() {

  var p1 = _("pass1");
  var p2 = _("pass2");
  // Here you can avoid an additional DOM traversal by storing the reference first
  var p1Val = p1.value;
  var p2Val = p2.value;

  // You can combine the invalid conditions using || operator
  if(p1Val != p2Val || p1Val == "" && p2Val == ""){ 
    p1.className = p1.className.replace( /(?:^|\s)suSuccess(?!\S)/g , '' );
    p2.className = p2.className.replace( /(?:^|\s)suSuccess(?!\S)/g , '' );
    p1.className += " suError";
    p2.className += " suError";
    _("pass2Check").innerHTML = "Fill in both password fields";
  } else {
    p1.className = p1.className.replace( /(?:^|\s)suError(?!\S)/g , '' );
    p2.className = p2.className.replace( /(?:^|\s)suError(?!\S)/g , '' );
    p1.className += " suSuccess";
    p2.className += " suSuccess";
    _("pass2Check").innerHTML = "Your password fields match";
  }
}

旁注：如果不存在旧的浏览器支持问题，您可以使用的添加和删除方法来添加和删除css类，而不是使用正则表达式。

pass2的作用是什么。。？您能否提供复制此文件所需的最小HTML和CSS，或者提供一个简单的在线演示。。？