小程序事件系统 —— 34 事件传参 - mark - 自定义数据

微信小程序进行事件传参的时候，除了使用 data-* 属性传递参数外，还可以使用 mark 标记传递参数；

mark 是一种自定义属性，可以在组件上添加，用于识别具体触发事件的 target 节点，同时 mark 还可以用于承载一些自定义数据（用于事件传参）；

在组件上使用 mark:自定义属性的方式将数据传递给事件处理函数，例如 <view mark:id="100" bindtap="handler" /> ，然后通过事件对象进行获取自定义数据；

下面通过微信开发者工具进行演示：

• 在 pages/cate/cate.wxml 页面中添加下面代码：

  <view>
    <!-- 如果需要使用 mark 进行事件传参，需要使用 mark: 自定义属性的方式进行参数传递 -->
    <button bind:tap="buttonHandler" mark:id="1" mark:name="tom">按钮</button>
  </view>

• 在 pages/cate/cate.scss 中添加下面样式代码：

  view {
    display: flex;
    height: 300rpx;
    background-color: skyblue;
    align-items: center;
  }

• 在 pages/cate/cate.js 中的 Page 中添加下面代码：

   buttonHandler(event){
     console.log(event)
   }

  点击刷新，在页面中点击按钮，观察 console 打印的事件信息，可以看到在一级位置可以看到 mark 传递的数据信息，如下：

  

我们再来看另外一种方式（和上一节内容进行对比），修改一下代码：

• 在 pages/cate/cate.wxml 页面中添加下面代码：

  <view bind:tap="parentHandler" mark:parentid="1" mark:parentname="tom">
    <!-- 如果需要使用 mark 进行事件传参，需要使用 mark: 自定义属性的方式进行参数传递 -->
    <button mark:id="1" mark:name="tom">按钮</button>
  </view>

• 在 pages/cate/cate.js 中的 Page 中添加下面代码：

  parentHandler (event) {
  	console.log(event)
  }

  先点击蓝色区域，在 console 输出中观察一下事件对象，mark 中可以获取 view 本身传递的数据，如下所示：

  

  清空控制台信息，点击按钮，在 console 输出中看一下事件对象中的 mark，可以发现里面有四个数据，分别为 view 和 button 中绑定的数据，通过事件对象获取到的是当前 button 节点和父节点上所有的 mark 数据，如下：

  

mark 和 data-* 很相似，主要的区别在于：

• mark 包含从触发事件的节点到根节点上所有 mark: 属性值；
• currentTarget.dataset 或者 target.dataset 只包含事件绑定者或者事件触发者那一个节点的 data-* 值；

参考视频：