# \[Solved\] How to remove event handler properly in a component?
**URL:** https://discuss.emberjs.com/t/solved-how-to-remove-event-handler-properly-in-a-component/8931
**Category:** Uncategorized
**Created:** [October 8, 2015, 5:43am UTC](https://discuss.emberjs.com/t/solved-how-to-remove-event-handler-properly-in-a-component/8931 "2015-10-08T05:43:15Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@nightire](https://discuss.emberjs.com/u/nightire)
#### Post date: [October 8, 2015, 5:43am UTC](https://discuss.emberjs.com/t/solved-how-to-remove-event-handler-properly-in-a-component/8931/1 "2015-10-08T05:43:15Z")
I did something like below in component(s):
```javascript
didInsertElement() {
window.addEventListener('scroll', this._scrollingHandler.bind(this), false)
},
willDestroyElement() {
window.removeEventListener('scroll', this._scrollingHandler, false) // this line did run, confirmed
}
```
I thought it would removes the event handler bound to `window`, but it did not! even the `removeEventListener` is actually run (confirmed by setting break point at here), `this._scrollingHandler` still responding when scrolling happens.
What I did wrong? What is the correct way to remove / cleanup for a component?
---
### Author:  [@jasonmit](https://discuss.emberjs.com/u/jasonmit)
#### Post date: [October 8, 2015, 5:54am UTC](https://discuss.emberjs.com/t/solved-how-to-remove-event-handler-properly-in-a-component/8931/2 "2015-10-08T05:54:36Z")
The problem is you’re using `Function.prototype.bind`, as it creates a new Function. So, when you remove it with `this._scrollHandler` it’s pointing to an entirely different function that it does not have a event handler for so it results in a noop.
A good read on this: [EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler)
Specifically, the part where it states:
> A problem in the example above is that you cannot remove the listener with bind. Another solution is using a special function called handleEvent to catch any events…
You can go the handleEvent approach using something like this mixin I wrote, [https://github.com/jasonmit/virtual-each/blob/master/addon/mixins/event-listener.js](https://github.com/jasonmit/virtual-each/blob/master/addon/mixins/event-listener.js), or:
```auto
didInsertElement() {
this._onScroll = this._scrollingHandler.bind(this);
window.addEventListener('scroll', this._onScroll, false);
},
willDestroyElement() {
window.removeEventListener('scroll', this._onScroll, false);
}
```
---
### Author:  [@nightire](https://discuss.emberjs.com/u/nightire)
#### Post date: [October 8, 2015, 6:09am UTC](https://discuss.emberjs.com/t/solved-how-to-remove-event-handler-properly-in-a-component/8931/3 "2015-10-08T06:09:23Z")
Ah, thanks very much, I didn’t realize the `bind` problem, but it indeed make senses.
Also, I was trying to use the `handleEvent` method: [Component - 4.6 - Ember API Documentation](http://emberjs.com/api/classes/Ember.Component.html#method_handleEvent), but it been labeled as _private_, it makes me struggled a lot.
Your way to solve this is very simple and clear, wish it could be found in official document, very useful!
---
### Author:  [@brian\_ally](https://discuss.emberjs.com/u/brian_ally)
#### Post date: [October 8, 2015, 5:53pm UTC](https://discuss.emberjs.com/t/solved-how-to-remove-event-handler-properly-in-a-component/8931/4 "2015-10-08T17:53:43Z")
@jasonmit Thank you for posting that. I was also unaware of that bind gotcha. Your mixin is an elegant solution to what could be a vexing bug.