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

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]

На каких элементах хотим ловить клики, где эти элементы находятся, какой data-атрибут хотим достать:

const container = document.querySelector('#element');
const itemSelector = '.someclass';
const key = 'id';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

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

container.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function(e) {
  e.preventDefault();
  let el = this;
  while (!(el = el.parentNode).hasAttribute(attr)) ;
  console.log(el.getAttribute(attr));
});

Или, на обладателях data-атрибута:

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

function onClick(e) {
  if (e.target.matches(itemSelector)) {
    e.preventDefault();
    console.log(e.currentTarget.attributes[attr].value);
  }
}

Или, на контейнере:

container.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    e.preventDefault();
    console.log(item.closest(attrSelector).dataset[key]);
  }
});