Как понять какой элемент был нажат, без использования id и аттрибутов?

Question

[Seldom7]

Нужно понять какой элемент был нажат (не добавляя в html им id и атрибуты) и изменить у нажатого какие-нибудь свойства, например, туглить класс. На jquery это не вопрос, так как есть this, а вот на чистом js он не понимает какой-именно был нажат. Можете переписать мой код на чистый js. Я просто новичок в чистом js. Заранее спасибо.

HTML:

<div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>

<style>
  .button {
    width: 150px;
    margin: 20px;
    height: 100px;
    cursor: pointer;
    background: #74d87e;
  }
  .active {
    background: red;
  }
</style>

jQuery (как я хочу):

$('.button').click(function(){
     $(this).toggleClass('active');
});

Comments

[Сергей Соколов]

в этой разметке у кнопок же есть какой-то общий родитель? Можно слушать клики на нём.

Answer 1

[Сергей delphinpro]

Можно просто использовать переменную в замыкании

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
     button.toggleClass('active');
  });
});

Ну или референс из события

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', event => {
     event.target.toggleClass('active');
     // Или так, если есть вложенные элементы
     // event.target.closest('.button').toggleClass('active');
  });
});

Comments

[Seldom7]

Спасибо, помогло, но у вас опечатка. Нужно же button.classList.toggle('active');

Answer 2

[Сергей Соколов]

Можно слушать события клика выше в дереве, на общем родителе. Да хоть на document, как в примере.
Это называется «делегирование событий» — мы поручаем обработку событий не каждой кнопке по отдельности, а общему предку.

Из события клика сразу вытаскивать event.target – это кликнутый элемент.
Проверять, кнопка ли это вообще, и есть ли нужный класс. Т.к. ловиться будут вообще все клики в документе.

document.addEventListener('click', ({ target }) => {
  if (!target.classList.contains('button')) return; // не тот клик
  target.classList.toggle('active');
});

Answer 3

[Vladislav]

console.log($(this))