Как по клику выбрать элемент на который кликнул?

Question

[Дима Долготер]

https://codepen.io/DimaDolgoter/pen/WNrxaKG

Как по клику выбрать элемент на который кликнул? Работает только если выбирать один элемент через querySelector

document.querySelector(".m1").addEventListener("click",  function(e){ 
this.style.backgroundColor = "red";
});

но как быть если все должны прослушиваться?

querySelectorAll не срабатывает.

Answer 1

[Дмитрий]

document.querySelectorAll(".m1")
  .forEach(el => el.addEventListener("click",  function(e){ 
    this.style.backgroundColor = "red";
  }));

Comments

[Дима Долготер]

cпасибо, а есть вариант, чтоб меньше символов?

[Дмитрий]

SpiderPigAndCat, Есть, называется jQuery

[Ярослав Иванов]

SpiderPigAndCat,

document.querySelectorAll(".m1")
  .forEach(i => i.onclick = e => { 
    e.target.style.backgroundColor = "red";
  });

[Дима Долготер]

Ярослав Иванов, не работает)

[Дима Долготер]

не работает)

[Ярослав Иванов]

SpiderPigAndCat, https://jsfiddle.net/w1rhq0mv/ все работает.

[Дмитрий]

SpiderPigAndCat, Да, оборачивать в Array.from было лишним

[Дима Долготер]

Дмитрий, спасибо). а как отследить событие если не просто навели на элемент а навели на элемент с ранеее нажатой лкм?

[Дима Долготер]

Дмитрий, нашел) if(e.which == 1){
this.style.backgroundColor = "red";
}

Answer 2

[Владимир]

https://davidwalsh.name/event-delegate
https://developer.mozilla.org/en-US/docs/Learn/Jav...
Раздел "Event delegation"
Вам нужно слушать верхний объект и проверять наличие класса у event.target (ниже написали, что лучше проверять target.closest если в айтеме будут span или другая верстка)

Проблемы с добавлением ивента в цикле на каждый елемент начнуться в тот момент, когда ты решишь удалять или добавлять елементы динамически через JS. Тебе нужно будет добавлять слушатель новым элементам и делать removeEventListener тем, которые удаляешь.
Если предпочитаешь добьавлять слушатель в цикле то используй не addEventListener а
element.onclick , для этих слушателей не нужно вызывать removeEventListener

Answer 3

[Максим Пак]

Через цикл перебирай элементы.