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

Une fontion pour deux objectifs: tester et attacher

Il y a plusieurs façon de créer un évènement. L'une d'elle 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 à cette é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é.

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 la cas) y attacher un évènement.