Explication détaillée de la différence entre addEventListener et on-js tutoriel-php.cn

Explication détaillée de la différence entre addEventListener et on

黄舟

Libérer： 2017-12-04 15:25:03

original

2439 Les gens l'ont consulté

Nous vous avons présenté l'utilisation de addEventListener en JavaScript dans un article précédent. Je pense que tout le monde comprend mieux addEventListener, nous continuerons donc aujourd'hui à vous présenter l'explication détaillée de addEventListener. La différence avec on !

Pourquoi avez-vous besoin de addEventListener ?

Regardons d'abord un extrait :

Code HTML

<div id="box">追梦子</div>

Copier après la connexion

Utiliser sur le code

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
　　　　　运行结果：“我是box2”

Copier après la connexion

Voir, le deuxième clic Le premier clic est couvert. Bien que dans la plupart des cas, nous puissions utiliser on pour obtenir les résultats souhaités, nous devons parfois exécuter plusieurs événements identiques. Évidemment, si nous utilisons on, cela ne peut pas être complété. il faut deviner ce que l'on veut, vous devez le savoir, n'est-ce pas ! addEventListener peut lier le même événement plusieurs fois sans écraser l'événement précédent.

Utilisez le code de addEventListener

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
　　　　运行结果：我是box1
　　　　　　　　　我是box2

Copier après la connexion

Le premier paramètre de la méthode addEventListener remplit le nom de l'événement. Notez qu'il n'est pas nécessaire d'écrire dessus. , et le troisième paramètre fait référence à la question de savoir s'il faut traiter le programme de traitement des événements dans la phase de bouillonnement ou dans la phase de capture. Si c'est vrai, il représente le traitement dans la phase de capture. phase de bouillonnement. Le troisième paramètre peut être omis et n'est pas nécessaire dans la plupart des cas. Le troisième paramètre, si vous n'écrivez pas le troisième paramètre, la valeur par défaut est false

L'utilisation du troisième paramètre

Parfois, la situation est comme ça

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

Copier après la connexion

Si je donne Box ajoute un événement de clic. Si je clique directement sur la boîte, il n'y a pas de problème. Mais si je clique sur l'élément enfant, comment se passe-t-il. ça s'exécute ? (Ordre d'exécution)

box.addEventListener("click",function(){
    console.log("box");
})

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

Copier après la connexion

En d'autres termes, par défaut, les événements sont exécutés dans l'ordre dans lequel les événements bouillonnent.

Si le troisième paramètre est écrit comme vrai, l'ordre d'exécution de la capture d'événement sera suivi.

box.addEventListener("click",function(){
    console.log("box");
},true)

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

Copier après la connexion

Processus d'exécution du bouillonnement d'événement :

Commencez le bouillonnement vers le haut à partir de l'élément le plus spécifique (l'élément sur lequel vous avez cliqué). Prenez notre cas ci-dessus pour parler de son ordre. C'est : enfant-. >box

Processus d'exécution de la capture d'événement :

En partant de l'élément le moins spécifique (la boîte la plus externe) et bouillonnant à l'intérieur, prenons notre cas ci-dessus pour en parler L'ordre est : box-> ;child

Résumé :

La différence entre addEventListener et on est détaillée via la méthode d'instance Friends, vous avez une meilleure compréhension de la. utilisation de addEventListener et ainsi de suite. J'espère que cela sera utile à votre travail !

Recommandations associées :

Explication détaillée de l'utilisation de addEventListener en JavaScript

Tutoriel d'utilisation du flux d'événements d'apprentissage d'objets Javascript DOM addEventListener()

Analyse de addEventListener() et removeEventListener() dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!