add-event-for-dom-elements/index.js

Declaratively add an event for a DOM element.

/**
 * The first character of the value becomes uppercase.
 * @param {string} value
 * @example capitalize('text') - Text
 * @returns {string} - Returns a value, only the first character of the value will be uppercase.
 */
function capitalize(value) {
  return value[0].toUpperCase() + value.slice(1);
}

/**
 * Create a new instances DomListener.
 * @class
 * @param { IDomParams } params
 */
export class DomListener {
  constructor(params) {
    this.params = params;
  }

  /**
   * This method adds event to html element.
   * @protected - this method is available only for those classes that inherit from this class.
   * @throws - Throws an error if any method was not implemented in the child class.
   * @returns { void } - This method returns nothing.
   */
  initDomListener() {
    this.params.eventNames.forEach((eventName) => {
      const methodName = this.getMethodName(eventName);
      if (!this[methodName]) {
        throw new Error(`Method ${methodName} is not implemented `);
      }
      this.params.element.addEventListener(eventName, this[methodName]);
    });
  }

  /**
   * This method removes event from html element.
   * @protected - this method is available only for those classes that inherit from this class.
   * @throws - Throws an error if any method was not implemented in the child class.
   * @returns { void } - This method returns nothing.
   */
  removeDomListener() {
    this.params.eventNames.forEach((eventName) => {
      const methodName = this.getMethodName(eventName);
      if (!this[methodName]) {
        throw new Error(`Method ${methodName} is not implemented `);
      }
      this.params.element.removeEventListener(eventName, this[methodName]);
    });
  }

  /**
   * Get method name based on event name.
   * @param {string} eventName.
   * @private This method is only available to the class itself.
   * @example this.getMethodName('click') - 'onClick'
   * @returns {string} - returns the method name.
   */
  getMethodName(eventName) {
    return `on${capitalize(eventName)}`;
  }
}