微信小程序学习笔记(四)

微信小程序事件
1.事件是
(1)一种用户行为,当用户长按某一张图片,或拖动,这些都属于用户的行为
(2)一种通讯方式,当用户点击按钮的时候是发生在UI中的,UI要把这些信息发送给我们的逻辑代码,这种发生的过程就是一种通讯方式
2.事件的类别
(1)点击事件 tap
(2)长按事件 longtap
(3)触摸事件 touchstart touched touchmove touchcancel
(4)其他 submit input…
3.事件冒泡
(1)冒泡事件冒泡是从里到外,一级一级的触发事件,例如,当点击view33的时候,view11和view22也同时被点击点击事件,长按事件,触摸事件都属于冒泡事件
微信小程序学习笔记(四)
微信小程序学习笔记(四)
(2)非冒泡事件除点击事件,长按事件,触摸事件外,其他都属于非冒泡事件
4.事件绑定需求
(a)小程序页面的输入框,在输入框里写上文字,文字要实事映射到下面的标签中,输入框改变了下面也要改变。
绑定成功
微信小程序学习笔记(四)
微信小程序学习笔记(四)
(1)需要给input标签绑定input事件,绑定的关键字bindinputdata: { num:0 },表示输入框的input事件的执行逻辑。
bind和catch的区别
通过catch绑定view33,点击view33的时候,只会触发view33,view11和view22并没有被触发事件,bind绑定view11和view22的时候,点击view22,view11和view22都会被触发。
(2)如何获取输入框的值,通过事件源对象来获取事件源对象存在于e,通过e.detail.value来获取
微信小程序学习笔记(四)
(3)把输入框的值赋值到data当中,不能直接<1>this.data.num=e.detail.value
<2>this.num=e.detail.value
正确写法是this.setData({num:e.detail.value})
简单版本的双向绑定
微信小程序学习笔记(四)
(b)点击不同按钮,对输入框中的值进行改变(1)按钮写好之后需要加入一个点击事件,bindtap,加减按钮的事件
(2)无法在小程序当中的事件直接传参
微信小程序学习笔记(四)
(3)通过自定义属性的方式来传递参数
(4)事件源中获取自定义属性,获取自定义属性operation,加号加一,减号减一
微信小程序学习笔记(四)
5.整体总结和特别注意
当要给某个标签绑定事件的时候,关键字是bind,当想获取输入框的值或者自定义属性都是通过事件源对象来获取的,如果说里面的值在看的时候记不住,没关系,只需要把e打印出来,再找确切的值。
当我们来获取data中的值的时候,是通过this.data.num来获取的,这是获取的方法,设置值,把值设置回num的时候,需要通过this.setData的方式来赋值,一个获取,一个设置不要搞错。
在绑定事件的时候要注意,不能够进行直接传参,当要传参的时候,要通过自定义属性的方式来传递参数,千万不要搞错。