Как правильно обработать клик на любой дочерний элемент?

Question

[siroper]

Здравствуйте. Имеется html структура

<div id="element">
	<ul>
		<li data-id="1">
			<a href="http://site.ru/" class="someclass">title</a>
			<p>texttexttexttexttexttexttexttexttexttext</p>
			<a href="http://site.ru/2/">tite2</a>
			<p>texttexttexttexttext</p>
			<a href="http://site.ru/3/">button</a>
		</li>
		<li data-id="2">
			<a href="http://site.ru/" class="someclass">title</a>
			<p>texttexttexttexttexttexttexttexttexttext</p>
			<a href="http://site.ru/2/">tite2</a>
			<p>texttexttexttexttext</p>
			<a href="http://site.ru/3/">button</a>
		</li>
		<li data-id="3">
			<a href="http://site.ru/" class="someclass">title</a>
			<p>texttexttexttexttexttexttexttexttexttext</p>
			<a href="http://site.ru/2/">tite2</a>
			<p>texttexttexttexttext</p>
			<a href="http://site.ru/3/">button</a>
		</li>
	</ul>
</div>

И к нему javascript:

var $el = document.getElementById('element');
	$el.querySelector('ul> li> a.someclass').onclick = function() {
		console.log(this.closest('li').getAttribute('data-id'));
		return false;
	};
	$el.querySelector('ul> li> div.someclass_2> a').onclick = function() {
		console.log(this.closest('li').getAttribute('data-id'));
		return false;
	};
	$el.querySelector('ul> li> a.someclass3').onclick = function() {
		console.log(this.closest('li').getAttribute('data-id'));
		return false;
	};

Но почему то обрабатывается только первый li в ul списке...

На jquery в десятки раз проще, в пару строк и обработчик на все ссылки сразу, написал бы так:

$(document).on('click', '#element> ul> li a', function() {
	console.log($(this).closest('li').data('id'));
});

Но как правильно это сделать на чистом js?

Answer 1

[0xD34F]

Где элементы находятся, что за элементы, что делать при клике:

const container = document.querySelector('#element');
const itemSelector = '.someclass';

function onClick(e) {
  e.preventDefault();
  console.log(e.target.closest('li').dataset.id);
}

Слушаем клики непосредственно на элементах:

container.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

Или, применяем делегирование:

container.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    onClick(e);
  }
});