Plusieurs JS gestionnaires d'événements sur un seul élément

En JS, vous n'avez pas vraiment avoir le contrôle sur ce afin que les gestionnaires d'événements sont appelés, mais avec de l'attention de la délégation et bien placé auditeurs, c'est possible.

Délégation est l'une des fonctionnalités les plus puissantes du modèle d'événement. Comme vous pouvez ou ne pouvez pas savoir: en JS, un événement est remis au haut de la cathédrale, d'où il se propage à l'élément sur lequel l'événement doit être appliquée. Il va de soi, par conséquent, qu'un écouteur d'événement attaché à l'objet global va appeler son maître avant à un auditeur qui a été attaché à l'élément lui-même.

window.addEventListener('click',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log('window noticed you clicked something');
    console.log(target);//<-- this is the element that was clicked
}, false);//<-- we'll get to the false in a minute

Il est important de noter que nous avons réellement l'accès à l'objet de l'événement dans les gestionnaires. Dans ce cas, nous avons laissé l'objet d'événement intacte, donc il va tout simplement continuer à se propager jusqu'à la cible, sur son chemin vers le bas, il peut répondre avec quelque chose comme ceci:

document.getElementById('container').addEventListener('click', function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() !== 'a' || target.className.match(/\bclickable\b/))
    {
        return e;//<return the event, unharmed
    }
    e.returnValue = false;
    if (e.preventDefault)
    {
        e.preventDefault();
    }
}, false);

Maintenant, ce gestionnaire sera appelé après que l'auditeur au niveau de la fenêtre appelle à son aide. Cette fois, l'événement est changé si l'élément cliqué n'ai pas eu le clickable classe, ou si l'élément est un lien. L'événement est annulé, mais il vit encore. L'événement est toujours libre de se propager plus bas dans les dom, de sorte que nous pourrions rencontrer quelque chose comme:

document.getElmentById('form3').addEventListener('click',function(e)
{
     e = e || window.event;
     if (e.returnValue === false || e.isDefaultPrevented)
     {//this event has been changed already
         //do stuff, like validation or something, then you could:
         e.cancelBubble = true;
         if (e.stopPropagation)
         {
             e.stopPropagation();
         }
     }
}, false);

Ici, en appelant stopPropagation, l'événement est tué. Il ne peut pas se propager plus bas dans les dom à sa cible, à moins que l'événement a déjà été modifié. Si non, l'objet de l'événement se déplace plus bas dans les DOM, comme si rien ne s'était passé.

Une fois qu'il atteint sa cible, nœud, l'événement entre dans sa deuxième phase: la phase de propagation. Au lieu de se propageant vers le bas dans les profondeurs de la DOM, il remonte jusqu'à, vers le haut niveau (tout le chemin à l'objet global, où elle a été envoyée... par où il est venu et tout le reste).

Dans la phase de propagation, tous les mêmes règles s'appliquent que dans la phase de propagation, seulement dans l'autre sens. L'objet de l'événement iront à la rencontre des éléments qui sont les plus proches de l'élément cible première, et l'objet global dernière.

Il y a beaucoup de pratique, et des schémas clairs pour ce ici. Je ne peux pas le mettre tout de mieux que le bon vieux quirksmode, donc je vous suggère de lire ce qu'ils ont à dire, il y a.

Ligne du bas: lorsque vous traitez avec 2 écouteurs d'événements, de les attacher à la fois à un niveau différent de tri de la file d'attente de la manière que vous souhaitez.

Si vous souhaitez garantir à la fois sont appelés, arrêter seulement le cas de la propagation dans ce gestionnaire qui sera appelé en dernier.

Quand vous avez deux auditeurs, attachés à la même élément/objet pour le même événement, je n'ai jamais rencontré une situation où l'auditeur qui était attaché à la première, n'était pas aussi appelé en premier.

Ça y est, je suis au lit, en espérant que j'ai fait sens

Je suis/a avoir un problème similaire que celui-ci. Cependant, je ne peux pas affecter l'ordre de/délégué de la pré-existant ', cliquez sur' événements (ajouté par Guichet cadre).
Mais j'ai encore besoin d'exécuter un nouvel événement personnalisé avant tout le "clic" ou "modifier" événements gérés par le framework.

Heureusement, il y a plusieurs événements qui sont effectivement exécutés dans l'ordre. Le "mousedown" et le "mouseup" arrive à passer avant le "click".

http://en.wikipedia.org/wiki/DOM_events

$(document).on('mousedown', function (event) {
  event = event || window.event
  var target = event.target || event.srcElement;
  console.log(target + ' before default event'); //Hold mouse button down to see this message in console before any action is executed
});

OU

$(document).on('mouseup', function (event) {
  event = event || window.event
  var target = event.target || event.srcElement;
  alert(target + ' before default event'); //You may not notice this event fires when the page changes unless this is an alert
});

Cela permettra à l'enregistrement pour être fait (par exemple via ajax) avant l'événement, est exécutée par exemple, un changement de page via ajax () lien.

Bien sûr, vous pouvez avoir besoin d'avoir des moyens plus sophistiqués pour détecter ce que les autres la gestion des événements devrait être fait, mais vous pouvez utiliser par exemple la "cible" de l'information pour cela. => Ce script surveille tout sur la page, car c'est ainsi que j'ai besoin de le faire.