Tester si un élément existe réellement et créer un évènement tout en JavaScript ?

Une fonction pour deux objectifs : tester et attacher

Il y a plusieurs façons de créer un évènement. L’une d’elles qui est assez répandu est d’utiliser la méthode "addEventListener".

var btn = document.getElementById('btn');

btn.addEventListener('click', function(){

  console.log('Bouton cliqué!');

});

Dans cette portion de code, on associe un évènement de type "click" à un élément dont l’id est "btn". Grâce à cet évènement lorsque nous cliquons sur l’élément "btn" le message "Bouton cliqué!" apparaît dans la console.

Problème lorsque l’élément est null

Il est très courant d’utiliser un seul fichier .js pour soulager le serveur. Ce fichier pourra par exemple associer un évènement à un élément qui existe dans une page, mais pas dans une autre. Dans ce cas la console du navigateur transmettra une erreur (TypeError: btn is null) et bloquera toutes les autres instructions du fichier JavaScript lorsque la page qui ne contient pas l’élément est appelée.

Solution : tester automatiquement l’existence de l’élément et associer l’évènement

La solution à ce problème consiste à vérifier qu’un élément ne soit pas null et si c’est bien le cas, de l’associer à l’évènement.

Pour cela nous pouvons utiliser la fonction ci-dessous.

ev = function (element, evenement, setFuntion) {

    if(element !== null) {

        element.addEventListener(evenement, setFuntion);

    }

};

Cette fonction JavaScript possède trois paramètres obligatoires.

• 1 element : l’element du DOM
• 2 evenement : le type de l’évènement
• 3 setFuntion : la fonction à exécuter lorsque l’on déclenche l’évènement

Exemple

Insérez la fonction "ev" quelque part dans votre code pour pouvoir l’utiliser.

var btn = document.getElementById('btn');

ev(btn, 'click', function () {

    console.log('Bouton cliqué!');

});

Ce code donne exactement le même résultat que le premier exemple. Mais il vérifie dans un premier temps que l’élément existe, pour ensuite (si c’est le cas) y attacher un évènement.