事件处理程序“点击离开”或“跳出”输入框

Question

我正在为表单编写一些 JS 验证。 当用户点击离开输入字段时执行验证功能。 尽管当用户点击离开时模糊或聚焦工作完美无缺，但它们只会在用户退出时触发“有时”。

所以当keycode == 9（即tab）时，我被迫为keydown编写一个额外的事件监听器。 是否可以使用 OR || 合并两个事件监听器以免重复自己？

就像是：

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

我知道上面的语法没有意义，但我只是想传达我的逻辑：两个事件侦听器（'click' 监视'blur' AND/OR '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 原型的一部分：

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)
        })
      }
})

Answer 2

我们不能那样做。 但是您可以使用命名函数并将其传递到您的事件侦听器中使用它，您可以避免一遍又一遍地编写相同的代码。

// Setup your function to run on various events
var myFunction= function (event) {
    // Do something...
};

// Add our event listeners
elements.inputfield.addEventListener('click', myFunction, false);
elements.inputfield.addEventListener('keydown', myFunction, false);