微信小程序学习九事件系统

2023-10-29 20:52:34

事件的绑定

方法名绑定

page.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tap_name: "tap_0",
  },
  //点击事件之心函数 
  tap_0(){
    console.log("我是点击事件");
  }
})

page.wxml

<view bindtap="tap_0"> //直接指定方法名绑定
   点击事件
</view>

动态方法名绑定

<view bindtap="{{tap_name}}"> //通过data中的数据进行事件执行函数的绑定，tap_name="tap_0"与上一种方法是同样的效果，这种方法必须使用{{}}将变量包裹，否则会识别为绑定tap_name方法
   点击事件
</view>

绑定wxs中的函数

<wxs module="wxs_data">
 module.exports={
   tap0:function(){
     console.log("我是wxs中的tap0");
   }
 }
</wxs>
<view bindtap="{{wxs_data.tap0}}"> //必须使用{{}}
   点击事件
</view>

传递参数

所有的小程序事件处理函数中都会接收一个事件对象，这个事件对象上有一些属性对我们很有用，会详细介绍，其余的一些属性，想要详细了解的同学可以去这里

currentTarget

当前事件的绑定元素

重要的参数有

dataset 元素上携带的 data-xx 属性值

<view bindtap="tap_0" data-key=‘12‘ data-id=‘12‘ ax="8">
   点击事件
</view>

dataset的值为

是不是所有的data-字符都消失了，只留下后面的key，id而ax属性却没有出现，是应为只有在标签上是data-xx格式的属性，才会被小程序标识为标签的携带数据

target

当前事件的触发元素，事件触发的源头元素，其属性和currentTarget一样

type

事件类型

touches

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。表示当前停留在屏幕上的触摸点。

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。