从 JavaScript 中的 Event 对象访问 data-* 属性

作者

从 Event 对象访问 data- *属性

Access data-* attributes from the Event object in JavaScript

使用target.dataset属性访问event
对象的数据属性。

该dataset属性提供对元素的自定义数据属性的读写访问。

该属性返回一个Map可以转换为对象的字符串。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <button id="btn" data-site="bobbyhadz.com">Click</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  // 👇️ DOMStringMap {site: 'bobbyhadz.com'}
  console.log(event.target.dataset);

  // 👇️ "bobbyhadz.com"
  console.log(event.target.getAttribute('data-site'));
});

从事件中获取数据属性

我们将click事件侦听器附加到按钮。

单击按钮时，回调函数会传递一个事件，我们可以在该事件上通过属性访问按钮元素target。

我们访问了
对象的数据集
属性event.target以获取Map包含按钮元素数据属性的字符串。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  // 👇️ {bar: 'bobbyhadz.com'}
  console.log(event.target.dataset);

  // 👇️ "bobbyhadz.com"
  console.log(event.target.getAttribute('data-site'));
});
Map该属性返回包含元素的自定义数据属性的只读字符串。

更新数据- *属性

该dataset属性本身是只读的。如果需要更新特定属性，则必须访问嵌套属性。

索引.js
console.log(el.dataset.id); // 👉️ "example"

el.dataset.id = 'updated id';

console.log(el.dataset.id); // 👉️ "updated id"

要更新data-site属性，请访问对象site的属性dataset
并为其分配新值。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  console.log(btn.dataset.site); // 👉️ "bobbyhadz.com"

  btn.dataset.site = 'google.com';

  console.log(btn.dataset.site); // 👉️ "google.com"
});

从事件对象更新数据集属性

将 DOM 字符串 Map 转换为 JS 对象

如果需要将 DOM 字符串 Map 转换为原生 JavaScript 对象，可以使用扩展语法 (…)。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  const map = event.target.dataset;

  const obj = {...map};
  console.log(obj); // 👉️ {site: 'bobbyhadz.com'}
});

使用 Event访问 data- *属性getAttribute

另一种允许您获取 DOM 元素上的任何属性的方法是调用

特定元素上的getAttribute()方法。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  const attr = event.target.getAttribute('data-site');
  console.log(attr); // 👉️ "bobbyhadz.com"

  console.log(event.target.getAttribute('id')); // 👉️ "btn"
});
请注意，将属性名称传递给getAttribute 方法时，我们必须提供完整的名称，包括部分data- 。

与访问地图上的属性时相反dataset，该data-
部分被排除在外。

如果在 DOM 元素上找不到该属性，该getAttribute方法将返回null一个空字符串。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：