javascript - scripts - Eliminar un oyente de evento anónimo

greasemonkey scripts

Question

¿Hay alguna forma de eliminar un detector de eventos agregado así:

element.addEventListener(event, function(){/* do work here */}, false);

sin reemplazar el elemento?

Answer 1

Oyentes de eventos vinculados anónimos

La forma más fácil de eliminar todos los detectores de eventos para un elemento es asignar su outerHTML a sí mismo. Lo que hace es enviar una representación de cadena del HTML a través del analizador HTML y asigna el HTML analizado al elemento. Debido a que no se pasa JavaScript, no habrá escuchas de eventos vinculados.

document.getElementById(''demo'').addEventListener(''click'', function(){
    alert(''Clickrd'');
    this.outerHTML = this.outerHTML;
}, false);

<a id="demo" href="javascript:void(0)">Click Me</a>

Delegados anónimos de eventos delegados

La única advertencia son los detectores de eventos delegados o los detectores de eventos en un elemento principal que observan cada evento que coincida con un conjunto de criterios en sus elementos secundarios. La única manera de superar eso es modificar el elemento para que no cumpla con los criterios del escucha delegado del evento.

document.body.addEventListener(''click'', function(e){
    if(e.target.id === ''demo'') {
        alert(''Clickrd'');
        e.target.id = ''omed'';
    }
}, false);

<a id="demo" href="javascript:void(0)">Click Me</a>

Answer 2

Aunque esta es una pregunta antigua y no menciona a jQuery, publicaré mi respuesta aquí, ya que es el primer resultado para el término de búsqueda ''jquery remove anonymous event handler'' .

Puedes intentar eliminarlo usando la función de unbind .

$(''#button1'').click(function() {
       alert(''This is a test'');
});

$(''#btnRemoveListener'').click(function() {
       $(''#button1'').unbind(''click'');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Click me</button>
<hr/>
<button id="btnRemoveListener">Remove listener</button>

Sin embargo, esto solo funciona si ha agregado el oyente utilizando jQuery - no .addEventListener

Encontré esto here .

Answer 3

El método Jquery .off () elimina los controladores de eventos que se adjuntaron con .on ()

Answer 4

La asignación de manejadores de eventos con funciones literales es complicada, no solo no hay forma de eliminarlos, sin clonar el nodo y reemplazarlo con el clon, sino que también se puede asignar involuntariamente el mismo manejador varias veces, lo que no puede suceder si usa un referencia a un controlador. Dos funciones siempre se tratan como dos objetos diferentes, incluso si son idénticos a los caracteres.

Answer 5

Lo siguiente funcionó lo suficientemente bien para mí. El código maneja el caso donde otro evento desencadena la eliminación del elemento del oyente. No hay necesidad de declaraciones de funciones de antemano.

myElem.addEventListener("click", myFunc = function() { /*do stuff*/ });

/*things happen*/

myElem.removeEventListener("click", myFunc);

Answer 6

No hay forma de eliminar limpiamente un controlador de eventos a menos que haya almacenado una referencia al controlador de eventos en la creación.

En general, los agregaré al objeto principal en esa página, luego puede iterar y deshacerse de ellos limpiamente cuando haya terminado con ese objeto.

Answer 7

Pregunta anterior, pero aquí hay una solución.

Estrictamente hablando, no puede eliminar un oyente de eventos anónimos a menos que almacene una referencia a la función. Dado que el objetivo de usar una función anónima es presumiblemente no crear una nueva variable, en su lugar podría almacenar la referencia en el elemento mismo:

element.addEventListener(''click'',element.fn=function fn() {
    //  Event Code
}, false);

Más tarde, cuando desee eliminarlo, puede hacer lo siguiente:

element.removeEventListener(''click'',element.fn, false);

Recuerde que el tercer parámetro ( false ) debe tener el mismo valor que para agregar el Escuchador de eventos.

Sin embargo, la pregunta en sí misma plantea otro: ¿por qué?

Hay dos razones para usar .addEventListener() lugar del .onsomething() simple .onsomething() :

Primero, permite agregar múltiples oyentes de eventos. Esto se convierte en un problema cuando se trata de eliminarlos selectivamente: es probable que termine por nombrarlos. Si quieres eliminarlos a todos, la solución outerHTML @ tidy-giant es excelente.

En segundo lugar, tiene la opción de elegir capturar el evento en lugar de hacerlo burbujear.

Si ninguno de los dos motivos es importante, puede optar por utilizar el método más onsomething .

Answer 8

Puede eliminar el detector de eventos de esta manera:

element.addEventListener("click", function clicked() {
    element.removeEventListener("click", clicked, false);
}, false);

Answer 9

Puede tratar de eliminar a todos los oyentes de esta manera:

allClicks = getEventListeners(element).click
allClicks.forEach(function(el){el.remove()})

o puede eliminar (por ejemplo) solo el último evento agregado

allClicks = getEventListeners(element).click
allClicks[allClicks.length-1].remove()

Answer 10

Puede tratar de sobrescribir element.addEventListener y hacer lo que quiera.
Algo como:

var orig = element.addEventListener;

element.addEventListener = function (type, listener) {
    if (/dontwant/.test(listener.toSource())) { // listener has something i dont want
        // do nothing
    } else {
        orig.apply(this, Array.prototype.slice.apply(arguments));
    }
};

ps .: no se recomienda, pero servirá para nada (no lo he probado)

Answer 11

Si estás usando jQuery prueba off método

$("element").off("event");