纯JavaScript下按钮多场景激活的统一事件处理方案咨询

对应事件与处理器数量 #

• 鼠标点击、键盘回车、手指触摸：
  原生<button>元素的click事件可以覆盖这三种场景：

  • 鼠标点击按钮直接触发click；
  • 按钮获得焦点时，按下回车（或空格）会自动触发click，无需额外监听键盘事件；
  • 移动端触摸按钮也会触发click（若无需优化300ms延迟，这个事件完全够用；如果要消除延迟，可以额外监听touchend，但常规场景下click足够）。
    因此不需要定义三个事件处理器，一个click事件处理器就能搞定所有常规的按钮激活需求。只有当你需要区分具体是哪种方式触发的（比如要给不同触发方式加特殊逻辑），才需要单独监听keydown（判断event.key === 'Enter'）、touchstart这类事件。

• W3C新推出的屁声激活事件：
  这类新事件属于独立的触发逻辑，不在现有事件的覆盖范围内，因此必须新增对应的事件处理器才能响应这种激活方式。比如假设事件名为fartactivate，就需要通过button.addEventListener('fartactivate', handler)来绑定处理逻辑。

内容的提问来源于stack exchange，提问作者ceving