前端的 Event 和 CustomEvent 有什么区别？

Event 和 CustomEvent 都是浏览器内建的事件对象，但它们有几个关键的区别：

• Event： 这是一个通用类型的事件对象，可以表示各种类型的事件，例如 click、mouseover、keydown 等。当用户与网页交互，或者某些特定情况发生（例如页面加载完成）时，浏览器会自动创建这个对象，并传递给相应的事件处理函数。

  // 创建一个通用的 Event 对象
  const event = new Event('test');
  
  // 注册一个事件监听器
  document.addEventListener('test', () => {
      console.log('Test event triggered');
  });
  
  // 触发事件
  document.dispatchEvent(event);
  

• CustomEvent： 这是一个特殊类型的事件对象，专门用于自定义事件。如果你想触发一个自定义事件（比如 "user-login"），并且你希望在事件对象中附带一些额外的信息，那么你就应该使用 CustomEvent。

  // 创建一个自定义事件
  const customEvent = new CustomEvent('user-login', { detail: { username: 'admin' } });
  
  // 注册一个事件监听器，使用 event.detail 访问附带的信息
  document.addEventListener('user-login', (event) => {
      console.log('User login event triggered', event.detail);
  });
  
  // 触发自定义事件
  document.dispatchEvent(customEvent);
  

可以看到，CustomEvent 的主要优势在于它可以携带附加信息，而 Event 则不行。此外，CustomEvent 也作为自定义事件的一种标准方式，可以帮助你的代码更加清晰和易于理解。