事件系统-小程序

事件绑定和事件对象

小程序绑定事件和在网页开发中绑定事件几乎一致，只不过小程序不能通过on绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click也需要使用tap事件来进行代替，绑定事件的两种方式：

• 第一种：bind：事件名，bind后面需要跟上冒号，冒号后面跟上事件名，例如：<view bind:tap="fName:></view>
• 第二种方式：bind事件名，bind后面直接跟事件名，例如：<view bindtap="fName:></view>

事件处理函数需要写到.js文件中，在.js文件中需要调用小程序提供的page方法来注册小程序的页面，我们可以直接在page方法中创建事件处理函数。

 

点击页面查看日志输出

在小程序中，inout输入框没有边框，需要自己添加样式

在app.scss中添加样式

事件分类以及阻止事件发生

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

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

使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。

点击按钮可以看到冒泡事件的发生

阻止事件冒泡将bind:tap改为catch：tap即可

事件传参-data-自定义数据

在触发事件时将一些数据作为参数传递给事件处理函数的过程

小程序中在组件上通过data-*的方式定义需要传递的数据，其中*就是自定义的属性，例如：<view data-id="100" bindtap="handler"/>, 然后通过事件对象继续宁获取自定义数据。

 

查看控制台

在view上绑定事件

点击蓝色区域，不点击按钮，事件触发者和事件绑定者都是view

点击按钮，不点击蓝色区域，

//currentTarget事件绑定者:view

  //target事件触发者:按钮

注意事项1

//在传递参数时，如果自定义属性是多个单词，单词与单词直接使用-进行连接

//在事件对象中会被转换成为小驼峰写法

注意事项2

事件传参-mark自定义数据

小程序除了用data-*传参外，还可以用mark标记传递参数

mark是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的target节点。同时mark还可以用于承载一些自定义数据

在组件上使用mark：自定义属性的方式将数据传递给事件处理函数，例如：<view mark:id"100" bnindtap="handler"/>然后通过事件对象进行自定义数据

view绑定事件

先点击蓝色区域

先点击按钮