web-dev-qa-db-fra.com

addEventListener Deux fonctions

Comment puis-je faire en sorte que addEventListener () ait deux fonctions à l'intérieur?

J'ai essayé de trouver ma propre solution, mais aucune ne semble pas fonctionner. Veuillez me donner un exemple si c'est possible.

javascriptfunctionaddeventlistener
18
Alex

Enveloppez vos fonctions dans une fonction.

const invokeMe = () => console.log('I live here outside the scope');
const alsoInvokeMe = () => console.log('I also live outside the scope'); 

element.addEventListener('event',() => {    
     invokeMe();
     alsoInvokeMe();    
});
38
Sten Muchow

Deux différences majeures entre l'ancien modèle et le nouveau modèle d'événement DOM niveau 2 est que 1) le nouveau modèle n'est pas aussi dépendant d'une propriété de gestionnaire d'événements spécifique, et 2) vous pouvez enregistrer plusieurs fonctions de gestionnaire d'événements pour n'importe quel événement sur n'importe quel un objet. (De: Learning JavaScript) Par exemple:

<!DOCTYPE html>
<html>
    <body>
        <div id="myElement"> Please click here.</div>
        <script>
            function func0() {
                alert("Function0 is called");
            }
            function func1() {
                alert("Function1 is called");
            }
            document.getElementById("myElement").addEventListener("click", func0, true);
            document.getElementById("myElement").addEventListener("click", func1, true);
        </script>
    </body>
</html>

Comme, même vous pouvez supprimer une fonction de gestionnaire d'événements spécifique pour un événement sur n'importe quel objet. Par exemple:

<!DOCTYPE html>
<html>
    <body>
        <div id="myElement"> Please click here.</div>
        <script>
            function func0() {
                alert("Function0 is called");
            }
            function func1() {
                alert("Function1 is called");
            }
            document.getElementById("myElement").addEventListener("click", func0, true);
            document.getElementById("myElement").addEventListener("click", func1, true);
            document.getElementById("myElement").removeEventListener("click", func0, true);
        </script>
    </body>
</html>
5
MMKarami