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


    事件的绑定

      方法名绑定

      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 代表距离文档左上角的距离。

     

  • 相关阅读:
    mac下mongdb的安装与配置
    zookeeper配置
    差分
    (leetcode)1601.最多可达成的换楼请求
    多线程知识点
    用jQuery中的ajax分页
    Codeforces Round #499 (Div. 1) VP 记录
    Educational Codeforces Round 125 VP 记录
    【笔记】一句话题解
    ABC245 做题记录
  • 原文地址:https://www.cnblogs.com/wrhbk/p/12122920.html
Copyright © 2020-2023  润新知