Подклассы Event вместо CustomEvent

Многие библиотеки предоставляют систему событий в качестве публичного API. Потребители могут подписываться на них и изменять поведение. Часто основой для событий служит класс CustomEvent, у которого в detail могут быть данные.

// Где-то в коде компонента
component.dispatchEvent(
  new CustomEvent(
    'quantity-change',
    {
      detail: {
        newValue,
        oldValue
      }
    }
  )
);

Нет ничего плохого в использовании CustomEvent. Исторически он существует, потому что для авторов библиотек нужен был механизм пользовательских событий, а наследование от встроенных классов до появления ES6 не поддерживалось.

При работе с CustomEvent нужно помнить, что полезная нагрузка события находится в свойстве detail. Нужен дополнительный шаг в цепочке доступа к свойству объекта или деструктуризация, что не очень удобно с точки зрения DX.

component.addEventListener(
  'quantity-change',
  (e) => {
    // чтение из detail
    const newValue = e.detail.newValue;
    const oldValue = e.detail.oldValue;
    
    // или деструктуризация
    const {
      newValue,
      oldValue
    } = e.detail;
  }
);

Если событие не предполагает полезной нагрузки и служит только для оповещения, то достаточно обычного объекта Event. Его конструктор принимает тип (имя) и объект с параметрами события (bubbles, cancelable, composed).

У Event есть встроенные подкласы. Среди них, например, ErrorEvent, ToggleEvent или PointerEvent. Если семантика какого-то встроенного события подходит цели, то можно использовать соответствующий встроенный подкласс Event.

Если же событие подразумевает полезную нагрузку, то вместо CustomEvent можно использовать собственный подкласс Event. Так как это обычный класс, можно объявить произвольные поля экземпляра, без промежуточного detail.

class QuantityChangeEvent extends Event {
  static eventName = 'quantity-change';
  
  newValue;
  oldValue;
  
  constructor(newValue, oldValue) {
    super(QuantityChangeEvent.eventName);
    this.newValue = newValue;
    this.oldValue = oldValue;
  }
}

// Где-то в коде компонента
component.dispatchEvent(
  new QuantityChangeEvent(
    newValue,
    oldValue
  )
);

Также для собственных подклассов Event с произвольными данными проще описать типы, чем для CustomEvent. Особенности типизации CustomEvent подробно описал Бартон Смит в статье Creating Strongly Typed Events for Web Components.

Больше деталей про использование Event можно найти в статьях от Джастина Фагнани и Бартона Смита:

- Stop Using CustomEvent;
- Creating Truly Custom Events for Web Components.

#js #web_api