javascript Как задать всем ссылкам на странице обработчик onclick, Метод querySelectorAll

Например в нашем html файле разбросаны ссылки <a> и нам нужно на на них повесить обработчик событий onclick, это можно сделать программно из js кода, а не выставлять вручную правя код.

<div id="effect">
<a class="effect" id="normal">1</a> 
<a class="effect" id="western">2</a> 
<a class="effect" id="noir">3</a>
<a class="effect" id="scifi">4</a>
</div>
<a class="effrrrect" id="rrrrrrrrrrr">4</a>

Теперь мы хотим повесить обработчик onclick на те ссылки <a> у которых есть класс "effect":

var controlLinks = document.querySelectorAll ("a.effect");
console.log (controlLinks);
for (var i=0; i<controlLinks.length; i++){
	controlLinks[i].onclick = function() {alert (222);};
}

Метод querySelectorAll похож на метод getElementsByTagName, за исключением того, что осуществляет выборку, соответствующих селектору CSS.

Консоль.лог в этом примере выдаст nodelist с четыремя данными анкоров в массиве

NodeList(4) [a#normal.effect, a#western.effect, a#noir.effect, a#scifi.effect]

Затем в цикле перебрали их все и назначили с помощью метода onclick на каждую ссылку функцию.

Если нам нужно повесить обработчик на все ссылки в файле, независимо от класса, то нужно записать так:

var controlLinks = document.querySelectorAll ("a");

Как узнать какое событие сработало?

Чтобы узнать на какую ссылку нажали, нужно изменить функцию вызова:

controlLinks[i].onclick = handleControl;

А в новой функции прописать:

function handleControl(e) {
// выясняем кто совершил вызов обработчика, извлекая идентификатор элемента, который это сделал
	var id = e.target.getAttribute("id");
	if (id == "play") {...

С помощью target.getAttribute мы можем id кликнутой ссылки