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

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]

document.querySelector('#element').addEventListener('click', e => {
  if (e.target.classList.contains('someclass')) {
    e.preventDefault();
    console.log(e.target.closest('li').dataset.id);
  }
});

или

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

document.querySelectorAll('#element .someclass').forEach(n => {
  n.addEventListener('click', onClick);
});