事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

• 事件对象可以携带额外信息，如 id, dataset, touches。
  

  事件类型

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

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

WXML的冒泡事件列表：

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

绑定事件

简单绑定

使用bind 加事件名。
事件绑定的写法类似于组件的属性，如：
wxml:

<view bindtap="myTap">
    Click here!
</view>

如果用户点击这个 view ，则页面的 handleTap 会被调用。
事件绑定函数在js文件中编写，如：
js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  myTap:function(){
    console.log("被点击")
  }
})

自基础库版本 1.5.0 起，在大多数组件和自定义组件中， bind 后可以紧跟一个冒号，其含义不变，如 bind:tap 。基础库版本 2.8.1 起，在所有组件中开始提供这个支持。


这样一个简单的点击事件绑定就完成了。

事件传递数据

现在实现当点击某一个字时console被打印出被点击的字符。
js:

  myTap:function(res){
    console.log(res)
  },

点击某个文字,返回一个json数据:

{type: "tap", timeStamp: 479152, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "", offsetLeft: 0, offsetTop: 21, dataset: {…}}
detail: {x: 38.40000534057617, y: 34.34999084472656}
mark: {}
mut: false
target: {id: "", offsetLeft: 0, offsetTop: 21, dataset: {…}}
timeStamp: 479152
touches: [{…}]
type: "tap"
_userTap: true
__proto__: Object

之后主要使用currentTarget:

currentTarget:
dataset: {}
id: ""
offsetLeft: 0
offsetTop: 21
__proto__: Object

dataset

这里有一个dataset,作用是后端用来捕获视图层传递过来的数据。

wxml:
对view添加一个data-title属性。

<view bindtap="myTap" data-title="起飞">嘤嘤嘤</view>

再次点击嘤嘤嘤。


可以看到dataset返回的就是之前在data-title中设定的值。
wxml：

<view 
bindtap="myTap" 
style="width:200rpx;height:200rpx;background:pink;"
data-title="起飞" 
data-id="123"></view>

可以同时传递多个值。

之后可以实现，点击这个粉红区域，然后区域中就自动将data-title中的值呈现出现。

wxml：

<view 
bindtap="myTap" 
style="width:200rpx;height:200rpx;background:pink;"
data-name="张三">{{name}}</view>

js:

  myTap:function(res){
    var name=res.currentTarget.dataset.name    // 定义变量
    this.setData({
      name:name
    })  // 修改data中参数的值，只能使用this.setData方法,this代表的是Page整个对象
  },

点击之前：


点击之后：

setData

用来在函数中修改data中变量的值。

setData还能用来修改组件的各种样式，例如宽高颜色等等，如：
wxml:

<view 
style="width:{{wth}}rpx;height:{{hit}}rpx;background:{{bgColor}};"
data-name="张三">{{name}}
</view>

<button bindtap="myTap" type="primary">点击设置样式</button>

js:

  data: {
    name:"小王",
    wth:300,
    hit:400,
    bgColor:"yellowgreen",
  },

  myTap:function(res){
    var name=res.currentTarget.dataset.name    // 定义变量
    this.setData({
      name:name,
      wth:350,
      hit:300,
      bgColor:"pink"
    })  // 修改data中参数的值，只能使用this.setData方法,this代表的是Page整个对象
  },

测试：
点击之前：

点击按钮之后:

补充

transition:0.5s属性是过渡动画效果，后面加时间表示动画时长。