微信小程序（六、自定义事件）

自定义事件

1、事件绑定

文档地址：事件 | 微信开放文档

事件分类

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。bind

2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。catch

pages\home\home.wxml

<view bindtap="handleClick1">
<!-- bindTop绑定点击冒泡事件 -->
<button bindtap="handleClick">按钮点击</button>
<!-- catchtap绑定点击非冒泡事件 -->
<button catchtap="handleClick">按钮点击</button>
</view>
<!-- 多个事件绑定触发 -->
<button type="warn" catchtouchstart="handleStart" catchtouchend="handleEnd">放个大招</button>

pages\home\home.js

handleClick(){
    console.log('按钮被点击了');
  },
  handleClick1(){
    console.log('view被点击了');
  },
  handleStart(){
    console.log('开始蓄力');
  },
  handleEnd(){
    console.log('蓄力完毕,发动成功');
  },

2、事件对象

当组件触发事件时，逻辑层绑定该事件的处理方法会收到一个事件对象。通过此对象来进行小程序的自定义事件参数据传递。

事件对象在小程序中是非常有意义的，这点与vue和react不同。在小程序中，事件对象是给事件处理程序传递参数的唯一方式。

BaseEvent基础事件对象属性列表：

属性	类型	说明
type	String	事件类型
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

注意点：target属性与currentTarget，在部分场景下是一样的，当然也存在不一样的情况。假定事件绑定在父上：

• 如果父不存在子组件（标签）并或子没标签之间内容的时候，两者一样

• 如果父存在子组件（标签）并且子有属性的时候，则两者不一样

• 在小程序中，如果希望在视图结构中通过事件给事件对象传递参数，则可以在标签上使用data-数据名=“数据值”的形式传递，例如参考代码：

  • <!-- 事件传递参数 -->
    <button bindtap="handleClick" data-num="111">按钮点击</button>

  • // 接收参数
    /**
      * 事件对象获取
      * 所有的事件处理程序都有一个默认的参数，这个参数就是事件对象
      */
    handleClick(event) {
        console.log(event);
        // 接收事件组件/标签自己的数据
        console.log(event.currentTarget.dataset.efg);
        // 获取事件组件/标签子的数据
        console.log(event.target.dataset.abc);
    }