Reemplazar todos los eventos de JavaScript vinculados a un elemento con un único evento nuevo

Question

Suponiendo que hay una gran cantidad de elementos en todo el sitio que tienen un número desconocido y un tipo de evento vinculado a ellos.

Si necesito anular todos estos eventos con un solo evento enlazado, y solo ese evento se disparará, ¿cuáles son algunas recomendaciones?

Me gustaría vincular el evento a un controlador de evento de clic, y estoy usando jQuery.

Gracias de antemano.

Answer 1

Está buscando jQuery#unbind.

para eliminar todos los controladores de eventos en un elemento o un conjunto de elementos, simplemente:

$('.some-selector').unbind(); 

para desenlazar única clic manipuladores, utilice unbind('click'):

$('.some-selector').unbind('click'); 

para desenlazar todos los manipuladores clic y inmediatamente unir a su propio controlador después de eso, puede hacer algo como esto:

$('.some-selector').unbind('click').click(function(event) { 
    // Your code goes here 
}); 

Tenga en cuenta que esto solo funcionará para eventos enlazados usando jQuery (usando .bind o cualquier método jQuery que use .bind internamente). Si desea eliminar todos los posibles eventos onclick de un conjunto dado de elementos, se puede utilizar:

$('.some-selector') 
    .unbind('click') // takes care of jQuery-bound click events 
    .attr('onclick', '') // clears `onclick` attributes in the HTML 
    .each(function() { // reset `onclick` event handlers 
    this.onclick = null; 
    }); 

Answer 2

Trate de usar en lugar de livebind. A continuación, puede eliminar fácilmente el enlace activo con die del selector, que es de operación rápida y establecer otro en vivo igualmente rápido.

$('selection here').live('..', .....); // multiple invocations 
    $('selection here').die(); 
    $('selection here').live('click',.....); 

DOM no se ha tocado en absoluto. La condición del evento se evalúa en la ocurrencia del evento.

Pero en general, si sólo desea intercambiar funciones de controlador de por qué no hacerlo de esta manera:

var ahandler = function(evt) { /* first implementation */ } 
$('.selector').bind('click', function(evt) { ahandler(evt); }); 

//and then if you want to change handlers 
ahandler = function(evt) { /* new implementation */ }; 

Esto da absolutamente ningún costo de cualquier cambio, etc. rebinding

Answer 3

Parece que esto es bastante simple en realidad:

$('#foo').unbind('click'); 
$('#foo').bind('click', myNewFunction); 

Gracias por sus respuestas.

Answer 4

Me gustaría pensar en ello sin eliminar todos los eventos (solo anularlos).

Si su nuevo evento único vinculado (lo llamamos "clic" aquí) es específico del elemento al que se une, entonces creo que puede ignorar cualquier otro evento simplemente mediante la función stopPropagation(). Como este

$("specific-selector").on("click", ".specific-class", function (e) { 
    e.stopPropagation() 
    // e.stopImmediatePropagation() 
    /* your code continues ... */ 
}); 

Detendrá los eventos burbujas, así que tus otros eventos no se dispararán. utilice stopImmediatePropagation() para evitar que otros eventos se unan a los mismos elementos como lo hace "click".

Por ejemplo, si el evento "mouseleave" también se une al elemento $ ("specific-selector .specific-class"), no se activará también.

Por último, todos los demás eventos no se activarán en este elemento, pero su nuevo elemento "clic".

La pregunta no resuelta es, ¿qué pasa si otros eventos también usan stopPropagation()? ... Entonces creo que gana el que tenga la mejor especificación, así que trate de evitar eventos complejos, demasiados es la sugerencia final.

Puede ver "Eventos directos y delegados" en jQuery site para obtener más información.