Así como podemos asociar eventos también podemos eliminar la asociación de eventos con nodos.
Si queremos poder eliminar la asociación de eventos hay que evitar utilizar funciones anónimas porque es imposible eliminar la asociación.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Eliminar asociación</title>
<style>
#contenedor {width: 940px; height: 500px; margin: 2em auto; }
#prueba {width: 500px; margin: 1em auto; padding: 1em; border: 1px dashed #333;}
#status {width: 500px; margin: 1em auto; padding: 1em; }
#remover {margin: 0 auto; width: 100px; display: block;}
</style>
</head>
<body>
<div id='contenedor'>
<div id='prueba'>
Da click dentro del recuadro.<br>
<p id='clicks'>Clicks: </p>
</div>
<div id='status'></div>
<input id='remover' type='button' value='Remover Evento'>
</div>
</body>
<script>
var contador = 0;
var clicks = document.getElementById('clicks');
var test = document.getElementById('prueba');
var estatus = document.getElementById('status');
var remover = document.getElementById('remover');
;(function () {
// Verificar si el navegador puede utilizar addEventListener
if (test.addEventListener) {
// Agregar funcionalidad al div
test.addEventListener('click', function () {
contador++;
clicks.innerText = "Clicks: " + contador;
} , false);
// Al dar click en el botón "Remover Evento" debería eliminar la funcionalidad de
// el div test.
remover.addEventListener('click', function () {
estatus.innerHTML = "Removiendo..."
test.removeEventListener('click', undefined, false);
});
} else {
test.attachEvent('click', function () {
contador++;
clicks.innerText = "Clicks: " + contador;
}, false);
remover.attachEvent('click', function () {
estatus.innerHTML = "Removiendo..."
test.detachEvent('click', undefined, false);
}, false);
}
}());
</script>
</html>Con la funcionalidad separada del evento, la podemos asociar a uno o más nodos o eventos además de que la podemos eliminar utilizando removeEventListener o detachEvent en el caso que queramos conservar compatibilidad con Oldie.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Eliminar asociación</title>
<style>
#contenedor {width: 940px; height: 500px; margin: 2em auto; }
#prueba {width: 500px; margin: 1em auto; padding: 1em; border: 1px dashed #333;}
#status {width: 500px; margin: 1em auto; padding: 1em; }
#remover {margin: 0 auto; width: 100px; display: block;}
</style>
</head>
<body>
<div id='contenedor'>
<div id='prueba'>
Da click dentro del recuadro.<br>
<p id='clicks'>Clicks: </p>
</div>
<div id='status'></div>
<input id='remover' type='button' value='Remover Evento'>
</div>
</body>
<script>
var contador = 0;
var clicks = document.getElementById('clicks');
var test = document.getElementById('prueba');
var estatus = document.getElementById('status');
var remover = document.getElementById('remover');
function llevar_conteo() {
contador++;
clicks.innerText = "Clicks: " + contador;
}
function cancelar_conteo() {
estatus.innerHTML = "Removiendo..."
test.removeEventListener('click', llevar_conteo, false);
}
;(function () {
// Verificar si el navegador puede utilizar addEventListener
if (test.addEventListener) {
// Agregar funcionalidad al div
test.addEventListener('click', llevar_conteo , false);
// Al dar click en el botón "Remover Evento" se manda llamar cancelar conteo.
// Dentro de esta función se elimina la funcionalidad de llevar conteo
remover.addEventListener('click', cancelar_conteo, false);
} else {
// Agregar funcionalidad al div
test.attachEvent('click', llevar_conteo, false);
// Al dar click en el botón "Remover Evento" se manda llamar cancelar conteo.
// Dentro de esta función se elimina la funcionalidad de llevar conteo
remover.attachEvent('click', cancelar_conteo, false);
}
}());
</script>
</html>Si queremos verificar las funciones que están asociadas a un nodo podemos utilizar getEventListeners(nodo) en firebug o en las herramientas de desarrollo de chrome.
Descargar referencia.