Why aren't my event listeners being removed?

public zoom(dragZoomActive: boolean): void {
    

    const onMouseDown = (event: MouseEvent) => {
      /*code*/
    }

    const onMouseMove = (event: MouseEvent) => {
      /*code*/
    }

    const onMouseUp = () => {
      /*code*/
    }

    if (dragZoomActive) {
      window.addEventListener('mousedown', onMouseDown, true);
      window.addEventListener('mousemove', onMouseMove, true);
      window.addEventListener('mouseup', onMouseUp, true);
    } else {
      window.removeEventListener('mousedown', onMouseDown, true);
      window.removeEventListener('mousemove', onMouseMove, true);
      window.removeEventListener('mouseup', onMouseUp, true);
    }
  }

I've tried changing the const to function, and then binding with bind(). That didn't quite work because the eventlisteners needed event passed in, and I didn't know how to do that by using function. The behavior of the functions work correctly, but the event listeners aren't being removed which is conflicting with other event listeners that exist for other purposes.

I'm assuming you are doing this:

zoom(true) // adds event listeners
//...
zoom(false) // removes events listeners

The problem is that every time you call zoom() new functions are being created. So when you call zoom(false) you are trying to remove functions that were never attached as event listeners.

function zoom(dragZoomActive) {
  const onMouseDown = (e) => console.log('mousedown')
  
  if (dragZoomActive) {
    window.addEventListener('mousedown', onMouseDown, true)
  } else {
    window.removeEventListener('mousedown', onMouseDown, true)
  }
}

zoom(true)
zoom(false)

click anywhere

This is an example of your bug. If you run that snippet and click it, you will see the listener never got removed.

To fix it, you need to make sure you are removing the exact same reference that you added in the first place. And that means that you need to declare those function outside the scope of this function.

const onMouseDown = (e) => console.log('mousedown') // moved this outside the zoom() function

function zoom(dragZoomActive) {  
  if (dragZoomActive) {
    window.addEventListener('mousedown', onMouseDown, true)
  } else {
    window.removeEventListener('mousedown', onMouseDown, true)
  }
}

zoom(true)
zoom(false)

click anywhere (nothing should happen)

Now onMouseDown inside zoom is always reference the exact same function, which means it can be removed.