[RFC] Simplifying event listeners binding

[titouanmathis]

Usage shows us that we often bind multiple event listeners to multiple refs in the mounted hook, and then unbind them in the destroyed hook.

The following proposals aim at reducing this repetitive task to the minimum by providing a logical mapping between refs, events and methods. It would also prevent unwanted memomy leak by systematically removing listeners when a component is destroyed.

Using a strict naming convention for methods

Naming methods based on the ref and event they should be bound:

• clickHandler → this.$el.addEventListener('click', this.clickHandler)
• contentClickHandler → this.$refs.content[<index>].addEventListener('click', this.contentClickHandler)

The following naming convention should be considered:

• <refName><EventName>Handler(event[, index]) (the current untold convention)
• on<RefName><EventName>(event[, index]) (the shortest)
• handle<RefName><EventName>(event[, index]) (the closest to the event API)

class Foo extends Base {
  get config() {
    return { name: 'Foo' };
  }

  /**
   * Automatically bound/unbound to the `click` event on the `this.$el` element.
   * @param {Event} event The event object.
   */
  clickHandler(event) {}
  // or
  onClick(event) {}
  // or
  handleClick(event) {}

  /** 
   * Automatically bound/unbound to the `click` event on every `this.$refs.content` element.
   * @param {Event}  event The event object.
   * @param {Number} index The current ref index.
   */
  contentClickHandler(event, index) {}
  // or
  onContentClick(event, index) {}
  // or
  handleContentClick(event, index) {}
}

Potential limitations

Adding the same listener to multiple events could become verbose:

class Foo extends Base {
  start() {
    console.log('I am starting!');
  }

  onMousemove(event) {
    this.start();
  } 

  onTouchmove(event) {
    this.start();
  }
}

// Smaller version
class Foo extends Base {
  onMousemove = this.start;
  onTouchmove = this.start;

  this.start(event) {
    console.log('I am starting!');
  }
}

To add multiple listeners to one ref we would have to dispatch them from the method following the naming convention:

class Foo extends Base {
  clickHandler(event) {
    if (this.isOpen) { 
      this.close() 
    }

    if (this.isHovered) { 
      this.highlight() 
    }

    // ...
  }
}

Adding listeners to some ref after another action without the same simplicity could be deceiving:

class Foo extends Base {
  start() {
    console.log('Starting...');
  }

  stop() {
    console.log('Stopping.');
  }
 
  mouseenterHandler() {
    this.start();
    this.$el.addEventListener('mousedown', this.stop, { once: true });
  }
}

[titouanmathis]

Added in #23 and available in the 1.0.0-alpha.5 version.