event.target.dataset
时间: 2023-04-26 07:00:20 浏览: 68
event.target.dataset是一个JavaScript中的属性,用于获取HTML元素上的自定义数据属性。这个属性返回一个DOMStringMap对象,其中包含了所有的data-*属性及其对应的值。可以通过这个属性来获取HTML元素上的自定义数据,例如data-id、data-name等。
相关问题
写一个e.target.dataset.id的例子
当用户点击一个 HTML 元素时,e.target 返回该元素,而 dataset 属性可以获取该元素的 data-* 属性的键值对。一个示例的代码如下:
```html
<button data-id="123" onclick="getButtonId(event)">点击获取按钮ID</button>
```
```javascript
function getButtonId(e) {
const buttonId = e.target.dataset.id;
console.log(buttonId); // 输出 123
}
```
希望这个例子可以对您有所帮助!
如何读取event.currentTarget.dataset 集合中的数据
要读取 `event.currentTarget.dataset` 集合中的数据,可以按照以下步骤进行:
1. 首先,获取事件对象 `event`。
2. 然后,从事件对象中获取当前事件的目标元素 `currentTarget`。
3. 最后,从目标元素的 `dataset` 属性中获取对应的数据。
以下是一个示例代码:
```javascript
function handleClick(event) {
const target = event.currentTarget;
const data = target.dataset;
const value = data.mydata; // 这里的 mydata 是一个自定义的数据属性
console.log(value);
}
// 在 HTML 中添加一个包含自定义数据属性的元素
<div data-mydata="Hello, world!" onclick="handleClick(event)">点击我</div>
```
在上面的示例中,当用户点击 `div` 元素时,会触发 `handleClick` 函数。函数中首先获取了事件的目标元素 `target`,然后从 `target` 的 `dataset` 属性中获取了 `mydata` 数据属性的值,并将其输出到控制台上。