Как получить id элемента с определенным классом по которому кликнули?

Question

[Михаил Р.]

Вопрос 1: Нагуглил 2 варианта получения данных элементов по которым кликнули, какой из них лучше использовать?

// этот?
document.addEventListener('click', function(e) {
	console.log(e.target.id);
});
// или этот?
document.onclick = function(e) {
	console.log(e.target.id);
};
// Ваш вариант?

Пробую получать данные элемента, по которому кликнули:

// получаю id элемента (если он конечно имеется)
document.addEventListener('click', function(e) {
	console.log(e.target.id);
});

// пробую получить id того элемента, у которого имеется класс 'test'

// синтаксическая ошибка...
document.getElementsByClassName('test').addEventListener('click', function(e) {
	console.log(e.target.id);
});
// работает только с первым элементом...
document.querySelector('.test').addEventListener('click', function(e) {
	console.log(e.target.id);
});

Вопрос 2: Как правильно получать id элемента лишь с определенным классом, по которому кликнули?

Comments

[alex]

какой из них лучше использовать

любой, и там, и там вы одним и тем же способом id получаете

// синтаксическая ошибка...

гуглите что возвращает .getElementsByClassName()

// работает только с первым элементом...

используйте .querySelectorAll()

[Роман]

Лови

Answer 1

[Алексей Ярков]

Если я понял вопрос, то я бы так сделал

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('test')) {
    console.log(e.target.id);
  }
})

Comments

[Михаил Р.]

Т.е. в любом случае нужно выполнять проверку уже после клика?

[Алексей Ярков]

Mike Ro, ну если не планируется добавление элементов динамически, то можно сразу селектором выбрать.
Но так надежнее.

[Михаил Р.]

Алексей Ярков, можно пример с селектором?

[Алексей Ярков]

Mike Ro,

const elements = document.querySelectorAll('.test')
elements.forEach(element => {
  element.addEventListener('click', function(e) {
    console.log(e.target.id);
  })
})

Но если после выполнения этого кода в DOM добавить еще элементы с классом test, то клик на них не сработает.

[Михаил Р.]

Алексей Ярков, Спасибо!

[Алексей Ярков]

Mike Ro, та не за что

Answer 2

[alexalexes]

Если изначально правильно повесить обработчик на элемент, то при выполнении обработчика искать этот элемент не нужно, его дескриптор будет находится в свойстве e.target дескриптора события.