How to remove Event Listener

[locbtran74]

I added an addEventListener to my form

form.addEventListener("submit", e => {
	e.preventDefault();
	
	myFunction();
});

When I click on a button, how do I remove this “addEventListener” ??

[m_hutley]

Probably unsurprisingly, removeEventListener is the counterfunction to addEventListener.

[m3g4p0p]

@locbtran74

When I click on a button, how do I remove this “addEventListener” ??

Just to complement, in order to remove an event listener you’ll need a reference to the handler function:

const handler = event => {
  event.preventDefault()
  myFunction()
}

form.addEventListener('submit', handler)

// Then somewhere else...
form.removeEventListener('submit', handler)

Or, if you want to remove the listener inside the handler itself, you can also use a named function like so:

form.addEventListener('submit', function handler (event) {
  event.preventDefault()
  myFunction()
  form.removeEventListener('submit', handler)
})

However in this case you might also just set the once option to true:

form.addEventListener('submit', event => {
  event.preventDefault()
  myFunction()
}, { once: true })