addEventListener listener not able to access other methods

Question

I have added a click event handler on a particular template like this:

let tableFilter = this.template.querySelector('.' + strDataTableTargetId + '_filter');
tableFilter.addEventListener('click',  this.handleCustomFilterEvents);

handleCustomFilterEvents(objEvent){
    if (objEvent !== undefined && objEvent !== null && objEvent.target !== undefined && objEvent.target !== null &&
        objEvent.target.classList !== undefined && objEvent.target.classList !== null){
        if(objEvent.target.classList.contains('addFilterAnchor')){
            this.addFilterRow(this.strTableClass); //Not able to access addFilterRow method
        }
    }
}

But still I am not able to access addFilterRow method.

I tried accessing like this :

tableFilter.addEventListener('click',  () => this.handleCustomFilterEvents);

But then the handler isn't even getting invoked.

Any thing I am missing?

Update (Answer)

I forgot to pass event, that is why it was not working with => This works:

tableFilter.addEventListener('click', (event) => this.handleCustomFilterEvents(event));

Answer 1

I forgot to pass event, that is why it was not working with => This works:

tableFilter.addEventListener('click',  (event) => this.handleCustomFilterEvents(event));


handleCustomFilterEvents(objEvent){
    if (objEvent !== undefined && objEvent !== null && objEvent.target !== undefined && objEvent.target !== null &&
        objEvent.target.classList !== undefined && objEvent.target.classList !== null){
        if(objEvent.target.classList.contains('addFilterAnchor')){
            this.addFilterRow(this.strTableClass); //Here I am able to access addFilterRow method
        }
    }
}

Answer 2

Basic problem with your code is the function call doesn't get context of this properly.

tableFilter.addEventListener('click',  () => this.handleCustomFilterEvents);

---

Apart from fat arrow function, you can use bind function to pass the context of this:

tableFilter.addEventListener('click',  this.handleCustomFilterEvents.bind(this));