Получить элемент li onclick с чистым javascript без применения onClick к каждому элементу

Прежде всего, я не хочу использовать jQuery, просто чистый javascript; пожалуйста, не ссылайтесь на дубликаты сообщений jQuery.

Если у меня есть список, например

<ul id="bulk">
    <li id="one"></li>
    <li id="bmw"></li>
</ul>

Я хочу получить идентификатор элемента с щелчком. Я знаю, что я мог бы добавить onClick = "" к каждому элементу, но у моего производственного списка есть 2000 записей, и я думаю, что лучший способ существует.

Например:

Если у меня был только один элемент li с id='singular', я мог бы использовать следующий javascript, чтобы получить идентификатор, нажав.

var li = document.getElementById('singular').onclick = function() { do something };

Поскольку есть тысячи элементов li, этот код не будет работать.

Мне удалось получить список имен элементов со следующим javascript:

var bulk = document.getElementById('bulk');
var bulkli = tabs.getElementsByTagName('li');
//bulkli contains ["one", "bmw"];

но это не говорит мне, какой из них был нажат.

Ответы

Ответ 1

Вы можете добавить прослушиватель событий к родительскому ul, а затем использовать e.target.id, чтобы получить id элемента с щелчком. Просто убедитесь, что элемент clicked на самом деле является li, так как вы можете не нажимать на него.

Пример здесь

var ul = document.getElementById('bulk');  // Parent

ul.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI'){
      alert(e.target.id);  // Check if the element is a LI
    }
});

Как указано в комментариях, этот подход не будет работать, если щелкнут дочерний элемент li. Чтобы решить эту проблему, вам нужно будет проверить, не является ли родительский элемент элемента с кликом, к которому привязан событие click.

Пример здесь

var ul = document.getElementById('bulk'); // Parent

ul.addEventListener('click', function (e) {
    var target = e.target; // Clicked element
    while (target && target.parentNode !== ul) {
        target = target.parentNode; // If the clicked element isn't a direct child
        if(!target) { return; } // If element doesn't exist
    }
    if (target.tagName === 'LI'){
        alert(target.id); // Check if the element is a LI
    }
});

Ответ 2

Вы можете использовать это:

var link = document.getElementById("bulk");
attachEvent(link, "click", EventHandler);

function attachEvent(element, type, handler) {
    if (element.addEventListener) element.addEventListener(type, handler, false);
    else element.attachEvent("on"+type, handler);
}

function EventHandler(e) {
    console.log(e.target.id);
}

скрипка

Эта работа, если li имеет дочерние элементы:

пример скрипта с детьми

Ответ 3

передать свой id в качестве параметра в функцию onclick.

this.getAttribute('id')