如何获取addEventListener参数

Question

I have a PHP script that generates links - I want to use addEventListener to pick up arguments on these links but what ever I try seems to fail. It's very old code that used to work with onClick events but I'm updating the code and beleived that addEventListener is the way to go.

I've taken my code back to basics to test the best code solution.

So I have links like so

    <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>

and a function

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

and event handler like this.

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

The event handler works, and picks up the clicks on the links.

I just don't understand how to pick up the arg data in id, but most of all I'd like to know how to pick up the args in data-un-str too. Eg "miguel" or "sarah"

I presume it is possible as I've seen it done elsewhere, I just couldn't work out how it had been done. I used to code JS a lot more about 10+ years ago, but I'm a bit lost now on DOM stuff and things seem to have changed alot.

For the code above when it tries to alert the id of the link clicked I just get 'undefined' in my alert.

Any advice would be great. Thanks

Answer 1

The event.target (where event is the first parameter passed to the handler) will refer to the clicked element, and you can get the data-un-str attribute by checking the target's .dataset.unStr property:

 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>