Comment ajouter un gestionnaire d'événement de clic pour deux boutons différents sans utiliser jQuery?

Question

Lorsqu'un utilisateur ouvre une modalité, il existe deux façons de la fermer, l'une en appuyant sur la touche 'x' dans le coin supérieur droit de la boîte, ou en appuyant sur le bouton d'annulation. Les deux boutons sont tous les deux dans le même nom de classe modal-hide mais ont également des ID de modal-close et modal-cancel.

var cancel = document.getElementById('modal-cancel'); 
var close = document.getElementById('modal-close'); 

cancel.onclick = function() { 
    //close window 
} 
close.onlick = function() { 
    //close window 
} 

Quelle est la meilleure façon de mettre en œuvre un gestionnaire d'événements pour que je ne dois pas écrire deux fonctions onclick différentes qui font la même chose?

Je ne veux pas du tout utiliser jQuery!

Answer 1

Tout d'abord, n'utilisez pas les propriétés d'événement! Utilisez plutôt addEventListener (MDN) comme standard moderne. Ensuite, vous devez définir une fonction de gestionnaire distinct (disons onClick) pour le lier avec vos éléments:

var cancelElt = document.getElementById('modal-cancel'); 
var closeElt = document.getElementById('modal-close'); 
var onClick = function() { 
    alert('Hello!'); 
}; 

cancelElt.addEventListener('click', onClick); 
closeElt.addEventListener('click', onClick); 

Answer 2

Utilisez simplement des fonctions nommées au lieu de fonctions anonymes. J'utilise addEventListener ci-dessous au lieu de onclick.

var cancel = document.getElementById('modal-cancel'); 
var close = document.getElementById('modal-close'); 

var clickFunction = function() { 
    // close modal 
} 

cancel.addEventListener('click', clickFunction, false); 
close.addEventListener('click', clickFunction, false); 

Answer 3

Une solution qui est essentiellement une ligne.

Array.prototype.forEach.call(document.querySelectorAll("#modal-cancel, #modal-close"), function(element) { 
    element.addEventListener("click", function() { 
     //close window 
    }, false); 
});