普通的 javaScript 从事件监听器获取函数中的属性

问题描述

所以我想弄清楚如何从一组共享相同类名的链接中获取数据 id 值。例如链接出现在这个标记中

<td><a class="deleteLink" href="#" data-id="4">&#10005;</a></td>
<td><a class="deleteLink" href="#" data-id="7">&#10005;</a></td>

然后我有一些创建事件侦听器的 javascript。出于某种原因，我在控制台中收到一条错误消息“Uncaught TypeError: this.getAttribute is not a function”

function deleteUser(event){
    event.preventDefault();
    var userId = this.getAttribute('data-id');
    if(confirm('Are you sure you want to delete this entry?')){
        window.location.href = 'delete.PHP?id=' + userId;
    }
}

var deleteLinks = document.getElementsByClassName('deleteLink');

for (i = 0; i < deleteLinks.length; i++) {
    addEventListener('click',deleteUser,false);
}

解决方法

忘记正确附加监听器，应该是

deleteLinks[i].addEventListener('click',deleteUser,false);

使用 querySelectorAll 而不是 getElementsByClassName

完成答案

function deleteUser(event){
    event.preventDefault();
    var userId = this.getAttribute('data-id');
    if(confirm('Are you sure you want to delete this entry?')){
        window.location.href = 'delete.php?id=' + userId;
    }
}

var deleteLinks = document.querySelectorAll('.deleteLink'); 

for (i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click',false);
}

,

你试过了吗：

var userId = event.target.getAttribute('data-id');

https://developer.mozilla.org/en-US/docs/Web/API/Event/target