LWC: Attaching event Listener Programmatically not working

Question

Has anyone been able to attach event listener programmatically?

I defined handleClick function in child component as follows:

handleClick(event) {
    event.preventDefault();
    const selectEvent = new CustomEvent('select', {
        detail: this.contact.Id
    });
    this.dispatchEvent(selectEvent);
}

This is the JS file of parent component:

constructor() {
    super();
    this.template.addEventListener('select', this.handleSelect.bind(this));
  }

handleSelect(event) {
    console.log(event.detail);
}

handleSelect method is never called. Seems like the listener is not attached during the instantiating time. But this code works when the event listener is attached declaratively.

Answer 1

When you attach event listener programmatically, you need to explicitly set bubbles property to true, so that the event bubbles up to parent component.

Set 'bubbles : true' where you have declared your 'customEvent'.

Your code should be :

const selectEvent = new CustomEvent('select', {
    detail : this.contact.Id, bubbles : true
});

Answer 2

The documentation says it follows the HTML spec on Templates for the constructor, which says you can use the constructor to add event listeners. However, perhaps there is a reason the documentation later goes on to show adding event listeners in the constructedCallback() portion of the lifecycle.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_lifecycle_hooks_dom

You could try that!