Question

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

如果我有一个像

这样的清单

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

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

例如：

如果我只有一个li元素与id='singular'我可以使用以下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
    }
});

正如评论中所指出的，当点击li的孩子时，这种方法不起作用。要解决此问题，您需要检查单击元素的父元素是否是附加了click事件的元素。

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有子元素，则此工作：

fiddle example with children

Answer 3

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

this.getAttribute('id')

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

3 个答案: