事件处理

一、事件绑定

小程序中通过 bind 或 catch 的方式来给元素节点绑定事件。 其中 bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定会阻止冒泡事件向上冒泡。
例如 tap 事件：

 <button bindtap="sayHello">按钮</button>

其中 sayHello 是事件处理函数。

二、事件处理函数

小程序中的事件处理函数都是定义在当前页面的 .js 文件中：

 Page({
     sayHello() {
         console.log("sayHello");
     }
 })

三、事件对象

如无特殊说明，当组件触发事件时，该事件的处理函数会接收到一个事件对象。
例如：

Page({
  sayHello(event) {
    console.log(event); // 事件对象
  }
 })

四、事件传参

小程序中提供了两种事件传参的方式：

• 自定义属性
• mark（2.7.1 新增）

  1、自定义属性

  我们可以在绑定事件的元素身上，通过 data- 的方式添加自定义属性，来设置要传递的参数。
  例如：

  <button bindtap="sayHello" data-name="woniu">按钮</button>

  在事件处理函数中可以通过事件对象的 currentTarget 属性来接收：

  Page({
  sayHello(event) {
    console.log(event.currentTarget.dataset.name); // woniu
  }
  })

  2、mark

  我们也可以在绑定事件的元素身上，通过 mark 属性设置要传递的参数。
  例如：

  <button bindtap="sayHello" mark:name="woniu">按钮</button>

  在事件处理函数中可以通过事件对象的 mark 属性来接收：

  Page({
  sayHello(event) {
    console.log(event.mark.name); // woniu
  }
  })

  3、自定义属性和 mark 的区别

  mark 和 dataset 很相似，主要区别在于：
  mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。