How to use event listeners with conditionals

[GHNewbiee]

• Would I use in-line event listeners with conditionals?
• What is the right way to do that?

For example, something like the following is acceptable or there is a better (more efficient) way?

...
  return html`
    <div @mouseenter=${this.hoverEnabled ? this._mouseEnter.bind(this, this.arg) : undefined}
         @mouseleave=${this.hoverEnabled ? this._mouseLeave.bind(this, this.arg) : null}
         @wheel=${this.mouseWheelEnabled ? this._mouseWheel : null}
         ... >
  ...
  `
...

I have also thought something like the following but it does not work for some reason (why?).

...
  return html`
    <div ${this.hoverEnabled ? html`@mouseenter=${this._mouseEnter.bind(this, this.arg)}` : ''}
         ${this.hoverEnabled ? html`@mouseleave=${this._mouseLeave.bind(this, this.arg)}` : ''}
         ${this.mouseWheelEnabled ? html`@wheel=${this._mouseWheel}` : ''}
         ... >
  ...
  `
...

Tia

[justinfagnani]

The first approach works - you are changing the bound event handler based on the this.hoverEnabled property. The second approach doesn't work for two reasons: 1) because you can't put a template into an attribute or event binding, 2) the html tag needs to contain elements - it can't contain element-less attribute and event bindings.

Also, you don't need to bind your event handlers to this. Lit will call them with the this of the host element for you.

  return html`
    <div @mouseenter=${this.hoverEnabled ? this._mouseEnter : undefined}
         @mouseleave=${this.hoverEnabled ? this._mouseLeave : undefined}
         @wheel=${this.mouseWheelEnabled ? this._mouseWheel : undefined}
    ></div>`

[GHNewbiee]

@justinfagnani Thanks a lot for your response.

2. the html tag needs to contain elements - it can't contain element-less attribute and event bindings.

Also, after removing html tags and maintaining expressions it didn't work, ie

...
  return html`
    <div ${this.hoverEnabled ? `@mouseenter=${this._mouseEnter.bind(this, this.arg)}` : ''}
         ${this.hoverEnabled ? `@mouseleave=${this._mouseLeave.bind(this, this.arg)}` : ''}
         ${this.mouseWheelEnabled ? `@wheel=${this._mouseWheel}` : ''}
         ... >
  ...
  `
...

Also, you don't need to bind your event handlers to this. Lit will call them with the this of the host element for you.

I have not managed to use arguments/parameters in event handlers without bind. All my efforts failed. For example,

...
  return html`
    <div @mouseenter=${this.hoverEnabled ? this._mouseEnter(this.arg) : undefined} ${''/** It does not work as expected */}
         @mouseleave=${this.hoverEnabled ? this._mouseLeave(this.arg) : undefined} ${''/** It does not work as expected */}
         @wheel=${this.mouseWheelEnabled ? this._mouseWheel           : undefined} ${''/** It works */}
         ... >
  ...
  `
  _mouseEnter(arg) {
    arg ? doSomething : doNothing;
    ...
    requestUpadte();
  }
  _mouseLeave(arg) {
    arg ? doSomething : doNothing;
    ...
    requestUpadte();
  }
  _mouseWheel(event) {
    event.preventDefault();
    ...
    requestUpadte();
  }
...

[justinfagnani]

You can't do this:

  return html`
    <div ${this.hoverEnabled ? `@mouseenter=${this._mouseEnter.bind(this, this.arg)}` : ''}

You're trying to bind a string (this @mouseenter... part) into an element-position binding. That doesn't do anything.

This first way works, do that.

[justinfagnani]

As for event handlers, just access this.arg in the event listener methods:

  render() {
    return html`
      <div @mouseenter=${this.hoverEnabled ? this._mouseEnter : undefined}
         @mouseleave=${this.hoverEnabled ? this._mouseLeave : undefined}
         @wheel=${this.mouseWheelEnabled ? this._mouseWheel : undefined}
      ></div>`
  }

  _mouseEnter(event) {
    this.arg ? doSomething : doNothing;
    // ...
    requestUpdate();
  }

  _mouseLeave(event) {
    this.arg ? doSomething : doNothing;
    // ...
    requestUpdate();
  }
  
  _mouseWheel(event) {
    event.preventDefault();
    // ...
    requestUpdate();
  }

[GHNewbiee]

As regards, accessing this.arg in the event listener methods, IMHO, it might not be very practical when:

• method has enough arguments/parameters (eg x, y, z, k, m, n, p) which they are changed into relatively long property names (eg this._xScale, this._yScale, this._zScale, this._xDeflection, this._yDeflection, this._zDeflection, this._force) and appear many times with result in making code "ugly'.
• method comes from another source/library and modification is not suggested due to source frequent updates
• the same method is used more than once; for example, ten buttons as follows:

  render() {
    return html`
      <button @click=${this._commonMethod.bind(this, 'fwd')}>Fwd</button>
      <button @click=${this._commonMethod.bind(this, 'bwd')}>Bwd</button>
      <button @click=${this._commonMethod.bind(this, 'up')}>Up</button>
      <button @click=${this._commonMethod.bind(this, 'down')}>Down</button>
      <button @click=${this._commonMethod.bind(this, 'left')}>Left</button>
      <button @click=${this._commonMethod.bind(this, 'right')}>Right</button>
      <button @click=${this._commonMethod.bind(this, 'here')}>Here</button>
      <button @click=${this._commonMethod.bind(this, 'there')}>There</button>
      <button @click=${this._commonMethod.bind(this, 'in')}>In</button>
      <button @click=${this._commonMethod.bind(this, 'out')}>Out</button>
    `
  }
  _commonMethod(arg) {
    if (arg === 'fwd') doFwd;
    //...
    if (arg === 'Out') doOut;
    // common code
  }  
}

In that case, it is required arg to be defined for each button inside the method earlier. event.target.id, event.target.textContent, etc has to be used to identify the button and, next, the arg to be set based on that property.

  render() {
    return html`
      <button id='fwd'   @click=${this._commonMethod}>Fwd</button>
      <button id='bwd'   @click=${this._commonMethod}>Bwd</button>
      <button id='up'    @click=${this._commonMethod}>Up</button>
      <button id='down'  @click=${this._commonMethod}>Down</button>
      <button id='left'  @click=${this._commonMethod}>Left</button>
      <button id='right' @click=${this._commonMethod}>Right</button>
      <button id='here'  @click=${this._commonMethod}>Here</button>
      <button id='there' @click=${this._commonMethod}>There</button>
      <button id='in'    @click=${this._commonMethod}>In</button>
      <button id='out'   @click=${this._commonMethod}>Out</button>
    `
  }
  _commonMethod(event) {
    const arg = event.target.id || event.target.textContent.toLowerCase();
    if (arg === 'fwd') doFwd;
    //...
    if (arg === 'Out') doOut;
    // common code
  }  
}

Which one will be used, it is more a matter of taste than efficiency/better practice, isn't it?

Are there any chances event handlers/methods with arguments to be supported directly in the lit library eg @click=${this.method(event, arg1, ..., argN)} or it cannot be done due to some language limitations/restrictions?

Tia

[justinfagnani]

Arrow functions work great for that when you need it:

  render() {
    return html`
      <button @click=${(e) => this._commonMethod(e, 'fwd')}>Fwd</button>

It's common for event handlers inside Array.map() callbacks for instance. I just wouldn't pass a class field as an argument when it's already available within the method

[GHNewbiee]

Yes, I do agree, too.