如何在回调函数中优雅检测Event Object的存在（及类型）或不存在

你的思路没问题，但确实能通过更简洁、更贴合JS特性的方式来优化这段逻辑——毕竟谁不想写更清爽的代码呢😉。下面分享几个实用的优化方向：

1. 用instanceof Event直接验证事件对象 #

JS原生的Event构造函数是判断标准事件对象最可靠的方式，比手动检查type属性要直接得多：

const myFunction = (e) => {
  if (e instanceof Event) {
    switch (e.type) {
      case 'click':
        console.log('Click Event');
        break;
      case 'mouseover':
        console.log('Mouseover Event');
        break;
      default:
        console.log(`Unknown event type: ${e.type}`);
    }
  } else {
    console.log('Separately invoked');
  }
};

这种方式利用JS原型链做判断，不仅能识别基础Event实例，还能兼容MouseEvent、KeyboardEvent等所有继承自Event的子类事件对象，完全省去了冗余的undefined和属性检查。

2. 结合可选链简化空值判断 #

如果担心某些非标准事件对象不满足instanceof Event，可以用ES2020的可选链操作符?.来安全访问type属性，同时简化空值判断：

const myFunction = (e) => {
  if (e?.type) {
    switch (e.type) {
      case 'click':
        console.log('Click Event');
        break;
      case 'mouseover':
        console.log('Mouseover Event');
        break;
      default:
        console.log(`Unknown event type: ${e.type}`);
    }
  } else {
    console.log('Separately invoked');
  }
};

e?.type会自动处理e为undefined或null的情况，不用再写e !== undefined && e.hasOwnProperty('type')这种绕弯的代码，可读性直接拉满。

3. 拆分逻辑让职责更清晰 #

如果你的函数后续逻辑会变复杂，建议把事件处理和直接调用的逻辑拆分开，避免一个函数干太多事：

// 专门处理事件的子函数
const handleEventTrigger = (e) => {
  switch (e.type) {
    case 'click':
      console.log('Click Event');
      break;
    case 'mouseover':
      console.log('Mouseover Event');
      break;
    default:
      console.log(`Unknown event type: ${e.type}`);
  }
};

// 主入口函数
const myFunction = (e) => {
  if (e instanceof Event) {
    handleEventTrigger(e);
  } else {
    console.log('Separately invoked');
    // 这里放直接调用时的业务逻辑
  }
};

拆分后每个函数职责单一，后续修改事件类型或者直接调用的逻辑时，都不会互相干扰，维护起来轻松很多。

小提醒：如果遇到自定义事件或者非浏览器环境的事件对象（比如某些JS框架模拟的事件），可以结合typeof e === 'object' && e?.type的组合判断，兼顾兼容性和简洁性。

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