js 当前点击元素的属性值

在JavaScript中，获取当前点击元素的属性值通常涉及到事件处理和DOM操作。以下是一些基础概念和相关信息：

基础概念

事件监听：使用addEventListener方法为元素添加事件监听器，以便在特定事件（如点击）发生时执行代码。
事件对象：当事件触发时，会生成一个事件对象，该对象包含有关事件的详细信息，包括触发事件的元素。
DOM元素：文档对象模型（DOM）表示HTML文档的结构，每个HTML元素都是DOM树中的一个节点。

获取属性值的方法

假设你想获取点击元素的某个属性值，比如data-id，可以使用以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Attribute Value</title>
</head>
<body>
    <button data-id="123">Click Me</button>

    <script>
        document.addEventListener('click', function(event) {
            // 获取触发事件的元素
            var element = event.target;

            // 获取元素的data-id属性值
            var dataId = element.getAttribute('data-id');

            console.log('Clicked element data-id:', dataId);
        });
    </script>
</body>
</html>