Remplacer tous les événements JavaScript liés à un élément avec un seul nouvel événement

Question

Si l'on suppose qu'il ya un grand nombre d'éléments dans le site qui ont un nombre inconnu et le type d'événements qui leur sont liés.

Si je dois passer outre tous ces événements avec un seul événement lié, et que cet événement se déclenche, quelles sont les recommandations?

Je lierait l'événement à un gestionnaire d'événements de clic, et je suis en utilisant jQuery.

Merci à l'avance.

Answer 1

Vous cherchez jQuery#unbind .

Pour supprimer tous les gestionnaires d'événements sur un élément ou un ensemble d'éléments, il suffit de faire:

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

Pour unbind seulement cliquer gestionnaires, utilisez unbind('click'):

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

Pour délier tous les gestionnaires de clic et immédiatement lier votre propre gestionnaire après cela, vous pouvez faire quelque chose comme ceci:

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

Notez que cela ne fonctionnera que pour des événements liés à l'aide jQuery (en utilisant .bind ou toute autre méthode jQuery que les utilisations .bind en interne). Si vous voulez supprimer tous les événements onclick possibles à partir d'un ensemble donné d'éléments, vous pouvez utiliser:

$('.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

Je voudrais donner une pensée sans enlever tous les événements tous ensemble (il suffit de les remplacer).

Si votre nouveau seul événement lié (nous l'appelons « clic » ici) est spécifique à l'élément auquel il se lie, alors je crois que vous pouvez ignorer tout autre événement simplement en fonction stopPropagation (). Comme cette

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

Il arrêtera les événements bulles, donc vos autres événements ne se déclenche pas. utilisation stopImmediatePropagation () pour éviter que d'autres événements attachés sur les mêmes éléments que « cliquez sur » le fait.

Par exemple, si "mouseLeave" événement est également se lier à l'élément $ ( ".specific-classe spécifique sélecteur"), il ne sera pas le feu aussi.

Enfin, tous les autres événements ne tirerons pas sur cet élément, mais votre nouvel élément « clic ».

La question non résolue est, si d'autres événements utilisent également stopPropagation ()? ... Je pense que l'une des meilleures victoires de spécification, essayez donc d'éviter complexes, trop d'événements est la suggestion finale.

Vous pouvez voir "directs et les délégués" sur site de jQuery pour plus d'informations.

Answer 3

On dirait que cela est assez simple en fait:

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

Merci pour vos réponses bien.

Answer 4

Essayez d'utiliser en direct au lieu de bind. Ensuite, vous pouvez facilement supprimer en direct lier avec mourir de sélecteur qui est une opération rapide et définir un autre direct aussi rapide.

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

DOM n'est pas touché du tout. état de l'événement est évalué sur occurrence d'un événement.

Mais en général, si vous voulez juste des fonctions de gestionnaire d'échange pourquoi ne pas le faire de cette façon:

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 */ };

Cela donne absolument aucun coût de tout changement, reconsolidation etc.