如何获取addEventListener参数

Question

我有一个生成链接的PHP脚本 - 我想使用addEventListener来获取这些链接上的参数，但我尝试过的东西似乎都失败了。 这是一个非常古老的代码，用于处理onClick事件，但我正在更新代码，并且相信addEventListener是要走的路。

我已经将我的代码重新用于测试最佳代码解决方案的基础知识。

所以我有这样的链接

    <a href="#" id="1" data-un-str="miguel" class="nameClick" >Alert Name1</a>
    </br>
    <a href="#" id="2" data-un-str="sarah" class="nameClick" >Alert Name 2</a>
    </br>

和一个功能

    function buildlink(e) 
    {
    var e = window.e || e;
    if (e.target.tagName !== 'A')
        return;
    alert(e.id);
    }

和事件处理程序这样。

window.onload=function(){
if (document.addEventListener)
    document.addEventListener('click', buildlink, false);

事件处理程序工作，并获取链接上的点击。

我只是不明白如何在id中获取arg数据，但最重要的是我想知道如何在data-un-str中获取args 。 例如“米格尔”或“莎拉”

我认为它是可能的，因为我已经看到它在其他地方完成，我只是无法弄清楚它是如何完成的。 我过去常常在大约10年前编写JS代码，但是现在我对DOM的东西有点迷失，而且事情似乎已经发生了很大变化。

对于上面的代码，当它试图提醒点击链接的id时，我只是在我的警报中得到'undefined'。

任何建议都会很棒。 谢谢

Answer 1

event.target （其中event是传递给处理程序的第一个参数）将引用单击的元素，您可以通过检查目标的.dataset.unStr属性来获取data-un-str属性：

 function buildlink(event) { const { target } = event; if (target.tagName !== 'A') { return; } const { id, dataset } = target; const { unStr } = dataset; console.log(id, unStr); } window.onload = function() { if (document.addEventListener) document.addEventListener('click', buildlink, false); } 

 <a href="#" id="1" data-un-str="miguel" class="nameClick">Alert Name1</a> <br> <a href="#" id="2" data-un-str="sarah" class="nameClick">Alert Name 2</a> <br>