# Removing listener for custom event

**URL:** <https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719>\
**Category:** Uncategorized\
**Created:** [August 19, 2020, 8:10am UTC](https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719 "2020-08-19T08:10:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![robertb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/robertb/32/470_2.png) [@robertb](https://discourse.aurelia.io/u/robertb)\
**Post date:** [August 19, 2020, 8:10am UTC](https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719/1 "2020-08-19T08:10:09Z")

</div>

To allow Aurelia to interoperate with other components on the page, I want to use a custom event, so I add this to my ViewModel’s activate method:  
document.addEventListener(‘my-custom-event’, event =\> {  
this.eventHandler(event.detail);  
}, false);  
This works fine, however I cannot see a way to handle this in the deativate method where I want to remove the event listener as removeEventListener needs a function name and I must use the fat arrow syntax to bind the local scope, but then the function is anonymous.

Any help would be appreciated.

R

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [August 19, 2020, 8:28am UTC](https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719/2 "2020-08-19T08:28:42Z")

</div>

This should work!

```
export class MyComponent
{
	onEvent = event => {
		this.eventHandler(event.detail);
    }
	
	attached() {
		document.addEventListener('my-custom-event', this.onEvent);
	}
	
	detached() {
		document.removeEventListener('my-custom-event', this.onEvent);
	}
}
```

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [August 19, 2020, 10:18am UTC](https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719/3 "2020-08-19T10:18:29Z")

</div>

@elitastic gave a correct answer.

You should note that functions are values in JavaScript as well. (They are instances of the `Function` class.) If you tried to pass anonymous functions to `addEventListener` and `removeEventListener`, JavaScript would handle those two anonymous functions as two independent values, even if they have the same signature and body. So that does not work as expected.

So you are right that you need to name your function. (Or assign it to a variable, which is effectively the same.)

@elitastic introduced a class member called `onEvent` in his answer, which refers to the desired event listener function to use. By using that single `onEvent` variable in both the `addEventListener` and `removeEventListener` calls, it will work as expected.

As you can see, it is quite fine to assign arrow functions to variables as well. @elitastic’s solution might even work with a regular function, but then you will need to explicitly bind that function to the class instance for the `this` keyword to work correctly. Something like this:

```
onEvent = (function (this, event) {
  this.eventHandler(event.detail);
}).bind(this);

```

Personally, I prefer arrow functions here.

---

<div class="post-metadata">

**Author:** ![robertb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/robertb/32/470_2.png) [@robertb](https://discourse.aurelia.io/u/robertb)\
**Post date:** [August 19, 2020, 1:51pm UTC](https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719/4 "2020-08-19T13:51:45Z")

</div>

Thanks @elitastic and @Bart. This proves I still have plenty to learn.

R

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [August 20, 2020, 7:19am UTC](https://discourse.aurelia.io/t/removing-listener-for-custom-event/3719/5 "2020-08-20T07:19:46Z")

</div>

For the sake of completeness, you can add `this` as an event handler which implements handleEvent function. With many handles it’ll save you a couple memory bytes 🙂