使用纯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"];

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

Answer 1

您可以向父项添加事件侦听器ul,然后使用它e.target.id来获取id单击元素.只需检查以确保点击的元素实际上是一个,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点击a 的孩子时,这种方法将不起作用.要解决此问题,您需要检查单击元素的父元素是否是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
    }
});

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

小提琴

这项工作如果li有儿童`元素:

小孩子的例子