Ciblez plusieurs sélecteurs dans JS uniquement

J'essaie de mettre en place un événement de clic sur mon site sans jQuery.

Je veux cibler de multiples sélecteurs.

Dans jQuery, cela peut se faire simplement par une virgule séparant les éléments comme indiqué ci-dessous.

jQuery(document).on('click', '#test1, #test2', function (event) { alert($(this).text()); });

Comment cela peut-il se faire facilement en javascript simple?

J'ai essayé ci-dessous qui fonctionne, mais il semble qu'il devrait y avoir une façon plus simple, surtout si je veux plus d'une alerte sur le clic? Je veux cibler plus d'un sélecteur spécifique, pas tous les divs par exemple

 var test1 = document.getElementById('test1'); var test2 = document.getElementById('test2'); if (test1.addEventListener || test2.addEventListener) { test1.addEventListener('click', function(event) { alert(this.innerHTML); }); test2.addEventListener('click', function(event) { alert(this.innerHTML); }); /* this only works when you click on test2 (test1,test2).addEventListener('click', function(event) { alert(this.innerHTML); }); */ /* this only works when you click on test2 (test1.addEventListener),(test2.addEventListener)('click', function(event) { alert(this.innerHTML); }); */ }

  var test1 = document.getElementById('test1'); var test2 = document.getElementById('test2'); if (test1.addEventListener || test2.addEventListener) { test1.addEventListener('click', function(event) { alert(this.innerHTML); }); test2.addEventListener('click', function(event) { alert(this.innerHTML); }); }

 <div id="test1">test1</div> <div id="test2">test2</div>

Existe-t-il un moyen de séparer les virgules des sélecteurs ou de configurer tous les sœurs avant d'exécuter le code comme vous le pouvez avec jQuery?

Ce serait essentiellement le code équivalent moins toute la vérification du navigateur:

 document.body.addEventListener("click", function(e) { //bind event to the document var targ = e.target; //get what was clicked on var id = targ.id; //grab the id if (["test1","test2"].indexOf(id)!==-1){ //see if it is one of the ids alert(targ.textContent); //show the text } }, false);

 <div id="test1">test 1</div> <div id="test2">test 2</div> <div id="test3">test 3</div>

Vous pouvez utiliser querySelectorAll :

 var elements = document.querySelectorAll('#test1, #test2'); for (var i=0, iLen=elements.length; i<iLen; i++) { // add listeners to elements[i]; }

Ou si vous souhaitez mélanger des objets hôtes avec des méthodes natives (pas une bonne idée, mais …):

 [].forEach.call(document.querySelectorAll('#test1, #test2'), function(el) { // attach listener to el });

Mais la délégation d'événement peut être une meilleure idée que de joindre le même auditeur à plusieurs éléments.

Reliez un gestionnaire au parent et utilisez la délégation de l'événement. http://javascript.info/tutorial/event-delegation

Créez un ensemble de sélecteurs puis faites itérer en ajoutant les auditeurs de l'événement. Mettez également votre alerte ou l'action que vous voulez dans une fonction. DEMO

 var selectors = new Array("test1", "test2"); for(var i=0; i < selectors.length; i++) { var temp = document.getElementById(selectors[i]); temp.addEventListener('click', function() { clickaction(this.innerHTML); }); } function clickaction(content) { alert(content); }

La délégation de l'événement avec l'index du polyfill si nécessaire.

 var arrIDsToWatch = ["test1", "test2", "test5"]; // indexOf Polyfill from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Compatibility if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(searchElement, fromIndex) { var k; if (this == null) { throw new TypeError('"this" is null or not defined'); } var O = Object(this); var len = O.length >>> 0; if (len === 0) { return -1; } var n = +fromIndex || 0; if (Math.abs(n) === Infinity) { n = 0; } if (n >= len) { return -1; } k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); while (k < len) { if (k in O && O[k] === searchElement) { return k; } k++; } return -1; }; } document.getElementById('parent').onclick = function(e) { e = e || event var target = e.target || e.srcElement var targetID = target.id; if (arrIDsToWatch.indexOf(targetID) > -1) { alert(target.innerHTML); } }

 <div id="parent"> <div id="test1">test1</div> <div id="test2">test2</div> <div id="test3">test3</div> <div id="test4">test4</div> <div id="test5">test5</div> </div>