Sven Sven - 3 months ago 5x
Javascript Question

Removing a JavaScript event: Why is this example not working?

I am struggling with removing a JavaScript event that has previously been added to a DOM element wit


$(() => {
var example = {
init() {
this.element = document.getElementById('foo');
this.element.addEventListener('mousedown', this.start.bind(this));
start() {
this.element.addEventListener('mouseup', this.stop.bind(this));
stop() {
this.element.removeEventListener('mouseup', this.stop);

var bar = Object.create(example);


When clicking the element and holding the mousebutton, 'start' is logged. As soon as the mousebutton is released 'stop' is logged. The first time this works as intended, but the second time 'stop' is logged two times, then three times, then four times... What this means is that in
, the event is not properly removed.

I know that I have to pass the exact same instance to
I passed to
, but to me this seems correct in this case, so I am a bit lost why this isn't working properly.


It doesn't work because bind returns a new function, which is different from your original one. You're adding one as a handler but trying to remove a different one. Even if you bound it again to the same this argument, I don't think the return value is guaranteed to be the same.

You need to store the return value of bind of somewhere and use it for both adding and removing the event handler.