使用纯JavaScript获取li元素的onclick事件，而不需要对每个元素应用onClick。

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

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

- gummage

---

+1 for going in plain-JS - Shomz

在点击事件中，查看事件对象，它包含目标元素。 - Lucas T.

Answer 1

你可以在父级ul上添加事件监听器，然后使用e.target.id来获取点击元素的id。只需检查一下是否实际上点击了li元素即可。请注意保证格式和HTML标签不变。

示例链接：这里

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元素的子元素时，这种方法将无法工作。为了解决这个问题，您需要检查单击元素的父元素是否是附加单击事件的那个元素。 示例在此处

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

- Josh Crozier

---

基本上是的，但如果li中有子元素呢？ - Teemu

@JoshCrozier 这似乎是最好的方法，但是为什么当我使用声明的函数来替换 ...('click', function(e){ }...，像这样：...('click', myfun(e));... 它就不能工作呢？ - gummage

@JoshCrozier 谢谢，我对JS还很新，你没有将e传递给函数的事实对我来说很奇怪，至于嵌套的LI，我不会有嵌套，所以你的第一个答案已经足够了。 - gummage

@gummage，你将函数指针作为回调传递。如果你传递myfun(e)，那么函数的返回值就会被传递。这就是为什么上面的例子不是(function(e){...})(e)，这与你尝试的等价。 - Cool Blue

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 包含子元素，则此代码有效：

带有子元素的示例代码

- Alex Char

Answer 3

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

this.getAttribute('id')

- boulder_02

---

OP已经提到他不想为每个元素使用onClick。 - Chirag Bhatia - chirag64