微信小程序-事件处理

事件绑定

文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

小程序的事件绑定需要注意以下几点：

• 小程序的事件绑定是通过标签的属性来完成的（与vue、react一致）
• 通过属性绑定事件其有两种写法
• 绑定冒泡事件（不会帮我们阻止冒泡）【主要】

• 语法：bind事件类型=“方法名” 方法名不能加括号，而且不能传参

• 绑定非冒泡事件（会帮我们阻止冒泡）

• 语法：catch事件类型=“方法名” 方法名不能加括号，而且不能传参

• 上述语法还支持在属性名中间加上“:”写法，例如：

• bind:事件类型
• catch:事件类型
• 自基础版本库2.8.1以后所有的事件都支持加“:”写法

• 特别需要注意，事件类型有可能其名称与之前大不同，例如以前的点击事件类型名字是click，在这里点击事件其实就是手指触摸事件，官网规定触摸事件是tap。

例如，声明一个view给其绑定一个点击事件（冒泡事件）：

<!--pages/eventBind/eventBind.wxml-->
<text>pages/eventBind/eventBind.wxml</text>
<!-- 给view标签绑定点击事件 -->
<view bindtap="tapHandler">
    点我一下有惊喜
</view>
<!-- 给view绑定长按事件 -->
<view bind:touchstart="start" bind:touchend="end">
    蓄力发动技能
</view>

随后需要在页面的js逻辑层文件中写对应的处理程序：tapHandler，参考代码如下

Page({
    /**
     * 页面的初始数据
     */
    data: {
        time: 0
    },
    /**
     * tap事件的处理程序
     */
    tapHandler() {
        console.log('青山，如故：放假啦。');
    },
    /**
     * 蓄力开始触发的事件
     */
    start() {
        // 获取当前的时间并记录
        let now = Date.now();
        this.setData({
            time: now
        })
        console.log('吟唱中.....');
    },
    /** 蓄力结束触发的事件 */
    end() {
        let diffTime = Date.now() - this.data.time;
        console.log('qwer毕，cd....');
        console.log('本次计时' + diffTime + '毫秒');
    },
    // ......
});

事件对象

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

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

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

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

• 如果父不存在子组件（标签）并或子没标签之间内容的时候，两者一样
  
• 如果父存在子组件（标签）并且子有属性的时候，则两者不一样
  
• 在小程序中，如果希望在视图结构中通过事件给事件对象传递参数，则可以在标签上使用data-数据名=“数据值”的形式传递，例如参考代码：

<!-- 传递参数efg -->
<view bindtap="tapHandler" id="efg" data-efg="efg">
  <!-- 传递参数abc -->
    <view id="abc" data-abc="abc">点我触发事件</view>
</view>

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