[Javascript] removeEventListener

Mistake 1: Not using the same function reference

// Wrong
button.addEventListener('click', () => {console.log('click')})
button.removeEventListener('click', () => {console.log('click')}) // Won't remove the listener
// correct
const onClick = () => console.log('click')
button.addEventListener('click', onClick)
button.removeEventListener('click', onClick)

// Wrong
button.addEventListener('click', function onClick() {console.log('click')})
button.removeEventListener('click', function onClick() {console.log('click')}) // Won't remove the listener
// correct
function onClick() {console.log('click')}
button.addEventListener('click', onClick)
button.removeEventListener('click', onClick)

Mistake 2: not passing the same options

function onClick() {console.log('click')}
button.addEventListener('click', onClick, {capture: true})
button.removeEventListener('click', onClick) // Won't remove, it uses defautl capture: false

Helper method:

export default function bind(
   target,
   {type, listener, options}
) {
   target.addEventListener(type, listener, options)
    
   return function unbind() {
       target.removeEventListener(type, listener, options)
   } 
}

// usage
const unbind = bind(button, {
    type: 'click',
    listener: () => console.log('click'),
    options: {capture: true}
});

unbind()