事件绑定和事件对象
小程序绑定事件和在网页开发中绑定事件几乎一致,只不过小程序不能通过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绑定事件
先点击蓝色区域
先点击按钮
标签:定义数据,程序,绑定,系统,点击,事件,bind,冒泡 From: https://blog.csdn.net/2201_75709573/article/details/141105755