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

【问题标题】：Unexpected Javascript DOM event listener issues意外的 Javascript DOM 事件侦听器问题
【发布时间】：2014-10-19 15:51:06
【问题描述】：

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

【问题讨论】：

_('pass2') 是做什么的..？你能提供最小的HTML 和CSS` 来重现这个，或者一个简单的在线演示......？

标签： javascript dom listener dom-events

【解决方案1】：

问题是，当验证成功以及值不匹配时，您仅对触发事件的元素 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 类而不是正则表达式。

【讨论】：