共计 1037 个字符，预计需要花费 3 分钟才能阅读完成。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({tapName: function(event) {console.log(event)
  }
})

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {"hi":"WeChat"}
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {"hi":"WeChat"}
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

共计 1523 个字符，预计需要花费 4 分钟才能阅读完成。

1.data-* 自定义属性介绍
在 html5 中我们可以通过 data- 来设置我们需要的自定义属性，进行数据存放
<div id=”root” data-age=”25″>
ROOT
</div>
之后可以通过 js 脚本获取 / 设置自定义属性，也可以使用 CSS 属性选择器进行样式设置
2.dataset 基本操作
我们先创建一个 id 为 root 的 div 元素，自定义属性 age 值为 25，然后我们对其自定义属性进行操作
let root = document.getElementById(‘root’);
console.log(root.dataset.age); // 25
root.dataset.name = ‘bigZMC’;
root.dataset.gender = ‘male’;
console.log(root.dataset); // {age: “25”, name: “bigZMC”, gender: “male”}
delete root.dataset.gender; // 语法和 object 删除某一属性相同
console.log(root.dataset); // {age: “25”, name: “bigZMC”}
console.log(root);
// 可以看到, 自定义 name 属性已经在该 dom 元素中
// <div id=”root” data-age=”25″ data-name=”bigZMC”>
// ROOT
// </div>
console.log(root.dataset);

由此可看出,dataset 是一个 DOMStringMap 对象, 类似 json 的键值对。所有自定义元素 data- 都保存在 dataset 中，还有一个需要注意的地方是，如果自定义属性为两个单词组成，如 data-hello-world, 那么在 dataset 中的 key 应该为 helloWorld, 即驼峰命名的形式。
3.dataset 的好处
当一个 element 上的数据很多的话，通过遍历 attribute 的 name 方法比较复杂，此时采用 dataset 一目了然，先上代码
let dataset = {};
for(let i = 0;i < root.attributes.length;i++) {
let name = root.attributes[i].name;
if(name.substring(0, 5) == ‘data-‘) {
dataset[name.substring(5)] = root.attributes[i].value;
}
}
console.log(root.dataset, dataset);

两种方式获取的结果相同, 但是使用 dataset 代码量大幅减少这里需要注意的是,getAttribute() 同样可以获取到 dataset 中的值;
console.log(root.getAttribute(‘data-age’)); // 25
root.setAttribute(‘data-gender’, ‘male’);
console.log(root.dataset); // DOMStringMap {age: “25”, name: “bigZMC”, gender: “male”}
以上代码表示 setAttribute() 和 getAttribute() 都能操作 dataset, 说明 dataset 实际是 attribute 的一个子集, 只是命名特殊, 只包含前缀为 data- 的属性。
4. 自定义属性在 css 中的应用
css 中可以通过属性选择器来对自定义属性的元素进行渲染
[data-name] {
color: red;
}
[data-name=’bigZMC’] {
color: blue;
}
参考博客: HTML5 data-* 自定义属性,HTML5 自定义属性对象 Dataset 简介