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

Unexpected Javascript DOM event listener issues

本文关键字：侦听器 问题 事件 DOM Javascript 意外      更新时间：2023-09-26

我创建了一个函数来检查两个密码字段，但当我修复输入时，只有一个字段获得成功类，另一个没有；为了使两个字段都具有success类，您必须单击它以进行更新。我可以使用什么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";
    }
}

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

更改您的功能如下：

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

补充说明：如果旧的浏览器支持不是问题，则可以使用classList-DOM API的add()和remove()方法来添加和删除css类，而不是regex。

相关文章：