如何用少量代码实现同时监听点击与Enter键的事件监听器？

基础实现方案 #

先把共用的处理逻辑抽成独立函数，再分别给目标元素绑定click事件和keydown事件，在keydown回调里判断是否按下Enter键：

// 定义共用的处理函数
function handleAction() {
  console.log('触发了点击或Enter键');
  // 这里写你的业务逻辑
}

// 获取目标元素
const targetElement = document.getElementById('your-element');

// 绑定点击事件
targetElement.addEventListener('click', handleAction);

// 绑定键盘事件，过滤Enter键
targetElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') { // 用e.key比keyCode更语义化，兼容性也足够
    handleAction();
    e.preventDefault(); // 可选：阻止默认行为，比如表单提交
  }
});

简短实现方案（贴近你的期望写法） #

如果你想实现类似一次传入多个事件的语法，可以自己封装一个极简的工具函数，来简化多事件绑定，甚至直接支持针对键盘事件的过滤：

// 封装多事件绑定工具函数
function addMultiEventListener(element, events, handler) {
  // 把事件字符串拆分成数组
  const eventList = events.split(',');
  
  eventList.forEach(event => {
    const trimmedEvent = event.trim();
    // 判断是否是带过滤的键盘事件，比如keyDown-enter
    if (trimmedEvent.includes('-')) {
      const [baseEvent, key] = trimmedEvent.split('-');
      element.addEventListener(baseEvent, (e) => {
        if (e.key.toLowerCase() === key.toLowerCase()) {
          handler(e);
        }
      });
    } else {
      // 普通事件直接绑定
      element.addEventListener(trimmedEvent, handler);
    }
  });
}

// 使用示例
const targetElement = document.getElementById('your-element');

addMultiEventListener(targetElement, 'click, keydown-enter', () => {
  console.log('触发了点击或Enter键');
  // 业务逻辑
});

这个工具函数完全符合你期望的写法，支持用逗号分隔多个事件，还能通过事件名-按键名的格式直接过滤特定按键，代码量少且复用性强。

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