Comment addEventListener fonctionne-t-il en JavaScript?

Il y a 2 scripts dans un document

//my_script.js goes first
document.onclick = function() {
    alert("document clicked");
};

//other_script.js comes after
//this overrides the onclick of my script,
//and alert will NOT be fired
document.onclick = function() {
    return false;
};

Pour s'assurer que mes cliquez sur l'événement à ne pas obtenir remplacées par d'autres script, je suis passé à addEventListener.

//my_script.js goes first
document.addEventListener("click", function() {
    alert("document clicked");
}, false);

//other_script.js comes after
document.addEventListener("click", function() {
    return false;
}, false);

Maintenant j'ai une autre question. Depuis return false dans le deuxième code est défini après alertcomment se fait-il n'empêche pas d'alerte d'être appelé?

Que faire si je veux que mon script pour obtenir le contrôle total de l'événement click (comme le retour de faux tout le temps faisant abstraction des événements définis dans d'autres scripts)?

source d'informationauteur user1643156

  1. 46

    Que faire si je veux que mon script pour obtenir le contrôle total de l'événement click (comme le retour de faux tout le temps faisant abstraction des événements définis dans d'autres scripts)?

    Si vous pouvez inscrire votre gestionnaire d'abord, avant qu'ils le font, vous pouvez le faire, à condition que le navigateur que vous utilisez correctement implémente DOM3 événements (dont il n'a probablement moins d'IE8 ou plus tôt).

    Il y a (au moins) quatre choses:

    1. La prévention de la valeur par défaut.

    2. L'arrêt de la propagation de l'ancêtre des éléments.

    3. D'arrêter les autres gestionnaires sur la même élément d'être appelé.

    4. L'ordre dans lequel les gestionnaires sont appelés.

    Dans l'ordre:

    1. La prévention de la valeur par défaut

    C'est ce que return false à partir d'un DOM0 gestionnaire. (Détails: L'Histoire sur Return False.) L'équivalent en DOM2 et DOM3 est preventDefault:

    document.addEventListener("click", function(e) {
    e.preventDefault();
}, false);

    La prévention de la valeur par défaut peut ne pas être pertinente pour ce que vous faites, mais depuis que vous avez été en utilisant return false dans votre DOM0 gestionnaire, et qui empêche la valeur par défaut, je suis dont il ici par souci d'exhaustivité.

    2. L'arrêt de la propagation de l'ancêtre des éléments

    DOM0 gestionnaires ont aucun moyen de le faire. DOM2 n', via stopPropagation:

    document.addEventListener("click", function(e) {
    e.stopPropagation();
}, false);

    Mais stopPropagation n'arrête pas d'autres gestionnaires sur le même élément appelé. De la spec:

    La stopPropagation méthode est utilisée éviter la multiplication d'un événement au cours de l'événement de flux. Si cette méthode est appelée par n'importe quel EventListener l'événement cessera de se propageant à travers l'arbre. L'événement complet envoi à tous les auditeurs sur l'actuel EventTarget avant que l'événement ne cesse de couler.

    (Mon accent.)

    3. L'arrêt d'autres gestionnaires sur la même élément d'être appelé

    Naturellement, ce n'est pas venu pour le DOM0, car il ne pouvait pas être d'autres gestionnaires pour le même événement sur le même élément. 🙂

    Autant que je sache, il n'y a pas moyen de le faire dans DOM2, mais DOM3 nous donne stopImmediatePropagation:

    document.addEventListener("click", function(e) {
    e.stopImmediatePropagation();
}, false);

    Certaines bibliothèques offrent cette fonctionnalité (même sur la non-DOM3 systèmes comme IE8) pour les gestionnaires connectés par l'intermédiaire de la bibliothèque, voir ci-dessous.

    4. L'ordre dans lequel les gestionnaires sont appelés

    Encore une fois, pas quelque chose qui est lié à DOM0, car il n'y avait pas d'autres gestionnaires.

    Dans DOM2, le cahier des charges explicitement dit que l'ordre dans lequel les gestionnaires attaché à un élément sont appelés n'est pas garantie; mais DOM3 changements, en disant que les gestionnaires sont appelés dans l'ordre dans lequel ils sont enregistrés.

    D'abord, à partir de DOM2 La Section 1.2.1:

    Bien que tous les EventListeners sur le EventTarget sont garantis pour être déclenché par un événement qui est reçu par le EventTargetaucune précision n'est donnée quant à l'ordre dans lequel ils recevront le cas en ce qui concerne les autres EventListeners sur le EventTarget.

    Mais ceci est remplacée par DOM3 La Section 3.1:

    Ensuite, la mise en œuvre doit déterminer la cible actuelle du candidat des écouteurs d'événement. Ce doit être la liste de tous les écouteurs d'événements qui ont été enregistrés sur la cible actuelle dans leur ordre d'inscription.

    (Mon accent.)

    Certaines bibliothèques de garantie de l'ordre, à condition de raccorder les événements avec la bibliothèque.

    Il est également intéressant de noter que dans Microsoft prédécesseur à DOM2 (par exemple, attachEvent), il était à l'opposé de DOM3 de l'ordre: Les gestionnaires ont été appelés inverse ordre d'inscription.

    Donc, en prenant #3 et #4 ensemble, si vous pouvez inscrire votre gestionnaire d'abord, il sera appelé en premier, et vous pouvez les utiliser stopImmediatePropagation pour empêcher d'autres gestionnaires d'obtenir appelé. Pourvu que le navigateur met en œuvre DOM3 correctement.

    Tout cela (y compris le fait que IE8 et plus tôt de ne même pas mettre en œuvre DOM2 événements, beaucoup moins DOM3) est l'une des raisons les gens utilisent les bibliothèques comme jQuery, certains ne garantissons la commande (tant que tout est de raccorder leurs maîtres via la librairie en question) et d'offrir des moyens de l'arrêter même d'autres gestionnaires sur le même élément appelé. (Avec jQuery, par exemple, l'ordre est l'ordre dans lequel ils ont été attachés, et vous pouvez les utiliser stopImmediatePropagation pour arrêter les appels vers d'autres gestionnaires. Mais je ne cherche pas à vendre jQuery ici, juste d'expliquer que certaines bibliothèques offrent plus de fonctionnalités que la base DOM choses.)