Para remover um manipulador de eventos registrado anteriormente usando o addEventListener()método, você usa o removeEventListener()método a seguir:
element.removeEventListener(type, handler);Linguagem de código: CSS ( css )Suponha que você tenha um botão com a classe .btn:
<button class="btn">Register</button>Linguagem de código: HTML, XML ( xml )O seguinte define o clickmanipulador de eventos:
function clickHandler(e) {
console.log('Button Clicked');
}Linguagem de código: JavaScript ( javascript )A seguir, adicione um manipulador de eventos ao evento click do botão:
const btn = document.querySelector('.btn');
btn.addEventListener('click', clickHandler);Linguagem de código: JavaScript ( javascript )Para remover o manipulador de eventos click do evento click do botão, use o removeEventListener()método a seguir:
btn.removeEventListener('click', clickHandler);Linguagem de código: JavaScript ( javascript )Observe que o evento e o manipulador de eventos devem ser iguais. Se você usar uma função anônima como manipulador de eventos, não poderá removê-la. O código a seguir não funciona:
const btn = document.querySelector('.btn');
// add an event listner
btn.addEventListener('click', function(e){
console.log('Button Clicked');
});
// this code won't work and has no effect
btn.removeEventListener('click', function() {
console.log('Button Clicked');
});Linguagem de código: JavaScript ( javascript )A maioria dos navegadores modernos, incluindo Chrome, Firefox e Edge, suportam o removeEventListener()método.
O IE8 não suporta o removeEventListener()método. Em vez disso , ele usa o detachEvent()método.
Se ainda precisar de suporte ao IE8, você pode usar a seguinte função auxiliar que funciona em vários navegadores:
function removeEvent(el, type, handler) {
if (el.detachEvent) {
el.detachEvent('on' + type, handler);
} else {
el.removeEventListener(type, handler);
}
}Linguagem de código: JavaScript ( javascript )
