Hola de nuevo:
Cita:
Iniciado por Jawar 
¿como podría entonces borrar por ejemplo todos los listeners del evento onclick para un elemento HTML dado?
Probé a hacer "elemento.onclick=null" , pero si has hecho "elemento.addEventListener(......)" , lo anterior no elimina lo añadido con addEventListener.
Lo malo de
removeEvent() (tanto de la función estándar como la del IE) es que hay que decirle qué función (manejador de evento) quitar del evento onclick. Es decir, no vale con decir
removeEvent(obj, "click"); hay que especificar qué función queremos quitar de click. Así que técnicamete no podremos hacer un bucle quitando todos los onclick del documento.
Si mantenemos un control sobre lo que hemos hecho sería fácil eliminar los onclick. Siempre los añadimos con
addEvent(), y por ende siempre los eliminamos con
autoRemoveEvent(), función que prepararemos inteligentemente para que quite todo lo que hemos añadido:
Código PHP:
<button id="click">click</button>
<button id="mouseoverYclick">mouseover & click</button>
<button id="quitar">quitar</button>
<div id="capa">No has estado encima</div>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function addEvent(obj, evType, fn, useCapture){
if(obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
}else if(obj.attachEvent){
obj.attachEvent("on"+evType, fn);
}else{
obj['on'+evType]=fn;
}
// Esta parte se encargará de quitar especificamente este evento (y los eventos añadidos anteriormente) a obj
var anterior = obj.quitarEvento; // guardamos la anterior función, si la hubiere
obj.quitarEvento = function() {
if( typeof anterior === "function" )
anterior(); // la ejecutamos, si la hubiere
removeEvent(obj, evType, fn, useCapture);
}
}
function removeEvent(obj, evType, fn, useCapture){
//alert("ejecuto removeEvent con obj="+obj.id+";\r evType="+evType+";\r fn="+fn+";\r y useCapture="+useCapture+"");
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
} else if (obj.detachEvent){
obj.detachEvent("on"+evType, fn);
} else {
obj['on'+evType]=function(){};
}
}
function autoRemoveEvents(obj) {
obj.quitarEvento();
}
var hola = function() { alert("hola!"); }
window.onload=function(){
// añadimos todos los eventos y los handlers
addEvent($('click'), 'click', hola, false);
addEvent($("mouseoverYclick"), "mouseover", function() {
$("capa").innerHTML="Has estado encima";
}, false);
addEvent($("mouseoverYclick"), "click", function() {
alert("Me has pulsado!");
}, false);
// añadimos un evento click al segundo botón para eliminar los eventos de los anteriores elementos (da igual qué eventos)
addEvent($('quitar'), 'click', function() {
autoRemoveEvents($("click"));
autoRemoveEvents($("mouseoverYclick"));
} );
}
// -->
</script>
Si queremos eliminar todos los onclick que hemos puesto en el documento basta con guardar los elementos que tengan onclick en un array (esto se haría en la función
addEvent()), y luego en la eliminar sólo ese handler (haría falta una condicional dentro de
quitarEvento() si es que sólo queremos eliminar el onclick.
Para eliminar todos los handlers de onclick de un elemento es todavía más fácil.
Me parece muy rebuscado pero es la única manera que veo de hacerlo.
Saludos.