javascript - 输入框的事件处理程序 "Click away"或 "Tab out"

Question

我正在为表单编写一些 JS 验证。当用户单击远离输入字段时，将执行验证功能。尽管当用户点击离开时，Blur 或 Focusout 可以完美地工作，但它们仅在用户退出时“有时”触发。

因此，当 keycode == 9(即制表符)时，我被迫为 keydown 编写一个额外的事件监听器。有没有办法使用 OR ||合并两个事件监听器以免重复自己？

类似于:

elements.inputfield.addEventListener('click' || 'keydown', e => {
    (e.keyCode == "9") || e.target.addEventListener("blur", e => {
        validation();
    })
})

我知道上面的语法没有意义，但我只是想表达我的逻辑:两个事件监听器(“click”监视“blur”和/或“keydown”监视 keyCode==9)，和一个输出。

这可能吗？

对于那些好奇的人，我当前的代码如下所示，并且在点击(模糊)时运行良好，但在选项卡退出时不可靠:

elements.userform.addEventListener('click', e => {
    if (e.target.matches('.input-box')) {
        e.target.addEventListener("blur", e => {
            userFormView.isEmpty(e.target)
        })
    }
})

Answer 1

我们不完全像你所做的那样，但你可以简单地创建一个具有相同结果的函数，例如:

function do(e) {
    (e.keyCode == "9") || e.target.addEventListener("blur" , e =>{
          validation()
         //other stuff
    }
}
elements.inputfield.addEventListener('click', do);
elements.inputfield.addEventListener('keydown', do);

这就是您要找的吗？

您可以编写一个函数来缩短它，例如:

function eventify(el, events, func) {
    var eventList = events.split("||").map(x=>x.trim());
    eventList.forEach(x => {
        el.addEventListener(x, func);
    })
}

eventify(elements.inputfield, "click || keydown", e => {
  if (e.target.matches('.input-box')){
    e.target.addEventListener("blur", e =>{
      userFormView.isEmpty(e.target)
    })
  }
})

或者将其作为任何 HTML 元素的 html 原型(prototype)的一部分以进行速记:

Object.defineProperty(HTMLElement.prototype, "eventify", {
    get() {
        return function(events, func) {
            var eventList = events.split("||").map(x=>x.trim());
            eventList.forEach(x => {
               this.addEventListener(x, func);
            })
        }
    }
})

然后

elements.inputfield.eventify("click || keydown", e => {
      if (e.target.matches('.input-box')){
        e.target.addEventListener("blur", e =>{
          userFormView.isEmpty(e.target)
        })
      }
})