Pourquoi avez-vous besoin d'AddEventListener?
Jetons un coup d'œil à un clip:
code html
<div id = "box"> Chasing Dreams </div>
Code avec sur
window.onload = function () {var box = document.getElementById ("box"); box.onclick = function () {console.log ("je suis box1"); } box.onclick = function () {box.style.fontsize = "18px"; console.log ("je suis box2"); }} Résultat en cours: "Je suis Box2"Je l'ai vu, le deuxième onclick écrase le premier onclick. Bien que dans la plupart des cas, nous pouvons utiliser pour terminer les résultats que nous voulons, nous devons parfois exécuter plusieurs événements identiques. Il est évident que si nous ne pouvons pas utiliser pour compléter ce que nous voulons, il n'est pas nécessaire de deviner. Vous devez savoir, non! L'AdveventListener peut lier le même événement plusieurs fois et n'écrasera pas l'événement précédent.
Code avec AddeventListener
window.onload = function () {var box = document.getElementById ("box"); box.adDeventListener ("cliquez", fonction () {console.log ("je suis box1");}) box.addeventListener ("cliquez", fonction () {console.log ("je suis box2");})} Result Result: I Am Box1 I Am Box2Le premier paramètre de la méthode addEventListenert est rempli dans le nom de l'événement. Notez que vous n'avez pas besoin d'écrire. Le deuxième paramètre peut être une fonction. Le troisième paramètre fait référence au processus du gestionnaire d'événements au stade de la bulle ou à l'étape de capture. Si True représente le traitement de l'étape de capture, si FALSE représente le traitement de l'étape de la bulle, le troisième paramètre peut être omis. Dans la plupart des cas, le troisième paramètre n'a pas besoin d'être utilisé. Si le troisième paramètre n'est pas écrit, le faux par défaut est faux.
Utilisation du troisième paramètre
Parfois c'est le cas
<body>
<div id = "box">
<div id = "child"> </div>
</div>
</docy>
Si j'ajoute un événement de clic à la case, il n'y a pas de problème si je clique directement dans la case, mais si je clique sur l'élément enfant, comment le fait-il? (Ordre d'exécution)
box.adDeventListener ("cliquez", fonction () {console.log ("box");}) child.addeventListener ("cliquez", fonction () {console.log ("enfant");}) Résultat de l'exécution: Child Box RésultatAutrement dit, l'événement par défaut est effectué dans l'ordre dans lequel les événements bulles.
Si le troisième paramètre est écrit comme vrai, il sera effectué dans l'ordre d'exécution de la capture d'événements.
box.addeventListener ("cliquez", fonction () {console.log ("box");}, true) child.addeventListener ("cliquez", fonction () {console.log ("child");}) Résultat de l'exécution: Box ChildProcessus d'exécution des bulles d'événements:
Commencez à bouillonner à partir de l'élément le plus spécifique (l'élément sur lequel vous avez cliqué). Prenez notre cas ci-dessus et l'ordre est: enfant-> Box
Processus d'exécution de la capture d'événements:
Commencez à bouillonner à l'intérieur de l'élément le moins spécifique (la boîte sur la plus à l'extérieur). Prenez notre cas ci-dessus et la commande est: Box-> Enfant
L'article ci-dessus comprend de manière approfondie la différence entre AddeventListener et est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.