微信小程序----事件绑定

前言

小程序中绑定事件, 通过bind关键字来实现。如: bindtap bindinput bindchanges等不同的组件支持不同的事件,具体查看组件的说明即可。
今天我们来了解bindtap和 bindinput这两个事件，以及它们所引出的事件通用的 三项技能。

1. 输入事件 (bindinput)

wxml页面

<input type="text" bindinput="handleInput" />
<view>
   {{num}}
</view>

js页面

Page({ 
    data: {
       num:0
    },
     // 绑定的事件 
   handleInput: function(e) {   
	 console.log(e);    
	 console.log("值被改变了");
   }

})

在绑定相应的事件信息时，我们必须明确值的信息来源，例如我们上面所写的输入框的内容最后存储的地方在哪呢?记住，小程序所有与事件相关的内容都存在了绑定函数时e的这个事件源当中,我们可以对其具体的值进行相应的查看

(1) 第一个技能包—通过绑定的事件源查找相应的数据,如我们上面所说的input输入框绑定的事件就存在了 e.detail.value下

(2)第二个技能包—如何对获取的数据进行相应的赋值(假设我们在js文件中的Page标签下有一个数据num,我们需要通过实时获取输入框的值对其进行改变)
上面我们已经知道输入的内容为e.detail.value
按照过去学的语言可能会有如下错误写法:
[1] this.data.num = e.detail.value
[2] this.num = e.detail.value
小程序中对数据的赋值有如下的规定的写法:

this.setData({
  num:e.detail.value
})

这样在js文件中(这样我们就能获取到输入框的值,并对num赋值了)

Page({

	/**
	* 页面的初始数据
	*/
	data: {
	  num:0
	},
	//1.输入框的input事件的执行逻辑
	handleInput(e){
		//console.log(e);
		//console.log(e.detail.value);
		this.setData({
		  num: e.detail.value
	   }) 
	}
})

2.点击事件(bintap)

这里我们要学习第三个技能包—小程序中无法在实践中直接传参，需要通过自定义属性的方法来传递参数。

代码解析:
绑定事件时不能带参数，如下就是错误示例

<button bindtap="handletap(1)">+</button>

事件传值通过标签自定属性的方式和value, 如data-operation="{{1}}"，
如下是正确示例

<button bindtap="handletap" data-operation="{{1}}">+</button>

通过上面的技能包一,通过事件源找到点击事件传递的参数丢在哪?

	//2.加减法按钮事件
	handletap(e){
	  console.log(e);
	}

小结

我们了解了事件的基本用法之后，更重要的是了解三项技能包。
[1] 通过事件源e 获取相应信息，
[2] 通过this.setData来为数据赋值,
[3] 通过自定义属性的方法来传递参数