使用纯javascript获取li元素onclick而不将onClick应用于每个元素

Question

首先我不想用jQuery，只是纯javascript；请不要链接到重复的 jQuery 帖子。

如果我有一个类似的列表

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

我想获取点击列表元素的 id。 我知道我可以将 onClick="" 添加到每个元素，但我拥有的产品列表有 2000 个条目，我认为存在更好的方法。

例如：

如果我只有一个带有id='singular' 的li 元素，我可以使用以下javascript 来获取点击的ID。

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"];

但这并不能告诉我点击了哪一个。

Answer 1

您可以向父ul 添加一个事件监听器，然后使用e.target.id 来获取点击元素的id。只需检查以确保单击的元素实际上是 li，因为您可能没有单击一个。

Example Here

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
    }
});

---

正如 cmets 中所指出的，当单击 li 的子项时，此方法将不起作用。为了解决这个问题，您需要检查被点击元素的父元素是否是点击事件所附加的那个。

Example Here

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
    }
});

Answer 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);
}

fiddle

如果 li 有 children` 元素，这项工作：

fiddle example with children

Answer 3

将其 id 作为参数传递给 onclick 函数。

this.getAttribute('id')