Получить 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 элемента лишь с определенным классом, по которому кликнули?

Answer 1

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

Answer 2

Используй jq

$('.nameClass').on("click", function(){
  alert($(this).attr('id'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="youId" class="nameClass">Text</div>