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

Get li element onclick with pure javascript without applying onClick to each element

提问by gummage

First of all I do not want to use jQuery, just pure javascript; please don't link to duplicate jQuery posts.

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

If I have a list like

如果我有一个像

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

I want to get the id of the clicked list element. I am aware I could add onClick=""to each element but the production list I have has 2000 entries and I think a better way exists.

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

For example:

例如：

If I had only one lielement with id='singular'I could use the following javascript to get the ID clicked.

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

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

As there are thousands of lielements, this code won't work.

由于有数千个li元素，此代码将不起作用。

I have been able to get a list of the element names with the following javascript:

我已经能够使用以下 javascript 获取元素名称列表：

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

but this does not tell me which one was clicked.

但这并没有告诉我点击了哪一个。

回答by Josh Crozier

You could add an event listener to the parent uland then use e.target.idto get the idof the clicked element. Just check to make sure that the clicked element is actually an lisince it's possible you may not be clicking on one.

您可以向父级添加一个事件侦听器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
    }
});

---

---

As pointed out in the comments, this approach won't work when the child of an liis clicked. To solve this, you would need to check to see if the parent element of the clicked element is the one that the click event is attached to.

正如评论中指出的那样，当li单击an 的子级时，这种方法将不起作用。为了解决这个问题，你需要检查被点击元素的父元素是否是点击事件附加到的元素。

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

回答by Alex Char

You can use this:

你可以使用这个：

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

小提琴

This work if lihas children` elements:

如果li有孩子的元素，这项工作：

fiddle example with children

与孩子一起小提琴的例子

回答by boulder_02

pass its id as parameter into the onclick-function.

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

this.getAttribute('id')