事件对象是啥？
当在微信小程序中触发一个事件时，相应的事件对象会作为参数传递给事件处理函数。事件对象包含了关于该事件的详细信息，通过访问事件对象的属性和方法，可以对事件进行处理和操作。
常用的事件对象属性和方法有：
type：表示事件的类型，例如点击事件为 tap，滑动事件为 touchmove 等。
timeStamp：表示事件被触发的时间戳，它通常是一个以毫秒计的数字。
target：表示触发事件的元素，它是一个指向触发事件的元素的引用。
currentTarget：表示当前绑定事件处理程序的元素，它是一个指向当前元素的引用。
touches：表示一个触摸点的列表，其中包含了触摸事件的相关信息，如坐标等。
changedTouches：表示导致触摸事件变化的触摸点的列表，例如在滑动事件中，指的是刚开始滑动的触摸点。
此外，事件对象还具有其他一些方法和属性，可以根据具体的需求来使用。你可以通过调试工具或 console.log(event) 输出事件对象，以便查看完整的属性列表和详细信息。
其中，有一点必须好好掌握 event.target.dataset
event.target.dataset 是一个对象，它可以获取到元素上的所有属性，不仅仅限于自定义的数据属性。无论是标准 HTML 属性还是自定义数据属性，只要在元素上存在，都可以通过 event.target.dataset 来访问。
对于标准的 HTML 属性，可以直接通过属性名来访问，例如 event.target.dataset.id 可以获取到元素上的 id 属性值。
而对于自定义数据属性，需要遵循一定的命名规则。在微信小程序中，自定义数据属性的命名需要以 "data-" 为前缀，后面跟上你定义的属性名。例如，在元素上添加了一个自定义数据属性 data-color，可以通过 event.target.dataset.color 来访问它的值。
需要注意的是，通过 event.target.dataset 获取的属性值都是字符串类型。如果需要进行其他类型的转换或处理，可以根据需要使用相应的方法。
对于自定义属性，自定义数据属性是指在元素上添加的以 "data-" 为前缀的属性，用于存储与该元素相关的特定数据。例如，添加了一个自定义数据属性 data-color，可以在 HTML 元素中这样定义：
<view data-color="red" bindtap="handleTap">点击我</view>
当用户点击这个 view 元素时，会触发绑定的 handleTap 事件处理函数，并将事件对象作为参数传递进去。在事件处理函数中，可以通过 event.target.dataset 来访问到该元素的自定义数据属性，即 { color: "red" }。其中，color 是你定义的自定义数据属性名，对应的值就是该属性所对应的值。
通过 event.target.dataset.color 可以准确定位到元素的某个具体自定义数据属性的值。例如，console.log(event.target.dataset.color) 可以打印出点击元素的颜色值（上述例子中为 "red"）。
这种方式可以方便地在事件处理函数中获取到元素上设置的自定义数据属性，从而灵活地使用这些数据来进行相应的操作。
光描述肯定不够，我们还要进行实战，思考其如何在实际业务中将其的灵活性体现地跟加淋漓尽致：
假设你有一个微信小程序页面，其中包含许多商品块，每个商品块都有一个加入购物车的按钮。当用户点击某个商品的加入购物车按钮时，你需要获取到该商品的相关信息，以便将其添加到购物车中
解决思路：
首先，在每个商品块的按钮上添加自定义数据属性来存储商品信息，为加入购物车的按钮添加了 data-product-id 自定义数据属性来存储商品的唯一标识符。
<view class="product-block">
<text>商品名称：iPhone 12</text>
<text>商品价格：5999元</text>
<button data-product-id="1" bindtap="addToCart">加入购物车</button>
</view>
然后，在对应的事件处理函数 addToCart 中，可以通过 event.target.dataset 获取到按钮上的自定义数据属性值，进而获取到商品的标识符。
Page({
addToCart: function(event) {
const productId = event.target.dataset.productId;
// 根据商品标识符进行其他处理，比如将商品添加到购物车中
console.log("添加商品到购物车，商品ID：" + productId);
}
})
当用户点击某个商品块的加入购物车按钮时，addToCart 事件处理函数会被触发，并将事件对象作为参数传递进去。通过访问 event.target.dataset.productId，可以获取到对应商品的标识符。
我们这里只进行了简单的日志输出，可以根据实际需求，使用获取到的商品标识符来进行其他业务操作，比如向后端发送请求、更新购物车状态等。
假设你有一个微信小程序页面，需要展示一个动态生成的列表，每个列表项包括商品名称和商品价格。同时，你希望用户能够点击任意列表项来查看该商品的详细信息。在处理点击事件时，你需要获取到对应列表项的信息，以便展示详细信息页面或进行其他操作。
首先，在 wxml 文件中动态生成列表项，为每个列表项添加自定义数据属性来存储商品信息
<view class="product-list">
<block wx:for="{
{products}}" wx:key="id">
<view class="product-item" bindtap="showDetail" data-product-id="{
{item.id}}">
<text>商品名称：{
{item.name}}</text>
<text>商品价格：{
{item.price}}元</text>
</view>
</block>
</view>
假设有一个名为 products 的数组，其中包含了多个商品的信息。通过 wx:for 循环遍历数组，动态生成商品列表项，并为每个列表项的父元素 view 添加了 bindtap 属性来绑定 showDetail 事件处理函数。在这里，我们使用了 data-product-id 自定义数据属性来存储商品的唯一标识符。
然后，在对应的事件处理函数 showDetail 中，你可以通过 event.target.dataset 获取到点击列表项的自定义数据属性值，进而获取到商品的标识符。
Page({
showDetail: function(event) {
const productId = event.target.dataset.productId;
// 根据商品标识符进行其他处理，比如展示详细信息页面
console.log("查看商品详情，商品ID：" + productId);
}
})
当用户点击某个列表项时，showDetail 事件处理函数会被触发，并将事件对象作为参数传递进去。通过访问 event.target.dataset.productId，可以获取到对应商品的标识符。
在这个示例中，我们只进行了简单的日志输出，你可以根据实际需求，使用获取到的商品标识符来进行其他业务操作，比如向后端发送请求获取详细信息，展示详细信息页面等。
最后，我们就来完成这个展示详细信息页面
当用户点击列表项后，展示详细信息页面是一个更为复杂的需求。
首先，在跳转到详细信息页面前，我们需要在小程序中定义该页面并传递商品标识符。在 app.json 文件中配置对应的页面路径：
{
"pages": [
"pages/index/index",
"pages/detail/detail"
]
}
接下来，在点击列表项后触发的事件处理函数 showDetail 中，可以通过获取商品标识符并使用 wx.navigateTo 方法跳转到详细信息页面。
Page({
showDetail: function(event) {
const productId = event.target.dataset.productId;
// 跳转到详细信息页面，并传递商品标识符
wx.navigateTo({
url: '/pages/detail/detail?productId=' + productId
});
}
})
在详细信息页面的 JavaScript 文件中，可以通过 wx.getStorageSync 方法获取传递的商品标识符，并使用该标识符获取商品的详细信息。
Page({
onLoad: function(options) {
const productId = options.productId;
// 根据商品标识符获取详细信息，比如发送请求给后端获取商品数据
const productDetail = this.getProductDetail(productId);
console.log("商品详细信息：", productDetail);
// 将商品详细信息渲染到页面中
this.setData({
productDetail: productDetail
});
},
getProductDetail: function(productId) {
// => 模拟从后端获取商品详细信息的过程
// 实际情况下，你需要发送请求给后端，获取商品数据
// => 假设这就是从后端得到的数据列表
const products = [
{
id: "1", name: "商品1", price: "99.99" },
{
id: "2", name: "商品2", price: "199.99" },
{
id: "3", name: "商品3", price: "299.99" }
];
const product = products.find(item => item.id === productId);
return product;
}
})
最后，在详细信息页面的 wxml 文件中，可以使用 productDetail 变量来展示商品的详细信息：
<view>
<text>商品名称：{
{productDetail.name}}</text>
<text>商品价格：{
{productDetail.price}}元</text>
<!-- 其他详细信息展示 -->
</view>
通过这种方式，你可以根据用户点击列表项的不同，动态展示对应商品的详细信息页面。
总的来说：
微信小程序的事件对象相比原生 JavaScript 事件对象更加强大和方便使用。微信小程序中的事件对象包含了更多关于事件的详细信息，使开发者能够更轻松地对事件进行处理和操作。
