如何獲取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>