WeChat applet 微信小程序(3) 事件绑定

WeChat applet 事件绑定

概述

事件是视图层到逻辑层的通讯方式，事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定到组件，当用户在视图层触发该组件的事件时，就会执行逻辑层中对应的事件处理函数。

事件列表
事件绑定

事件处理函数书写在page.js中，可以带有event参数(代表事件对象)

<componentName bind事件名称="事件处理函数名称"></componentName>
//原生组件不支持下边这两个事件绑定方式
<componentName bind:事件名称="事件处理函数名称"></componentName>
//catch会阻止事件冒泡
<componentName catch事件名称="事件处理函数名称"></componentName>
<componentName catch:事件名称="事件处理函数名称"></componentName>

原生组件指的是客户端创建组件，原生组件中不支持bind:事件名称绑定方式
如input、textarea等只能使用bind事件名称的方式

tap 轻敲(触屏后立即离开)
longtap (触屏350ms后离开)
longpress (触屏350ms后离开)

longtap 和 longpress 的区别
当同时添加 tap&longtap tap&longpress
longtap会触发tap，longpress不会触发tap

bind或bind:不会阻止事件冒泡；catch或catch:会阻止事件冒泡

无论哪一种事件绑定方式，在组件的事件处理函数严禁带有小括号
如何进行数据的传递？？？

事件处理函数
对比vue.js 和小程序.js

vue.js

<template><div><button @click="getById(5)">单击获取5号商品信息</button></div>
</template>
<script>
export default{data(){return{//...//...}},methods:{getById(id){...},...}
}
</script>

page.wxml

<button bindtap="getById">获取6号商品信息</button>
//bindtap后的函数，绝对不能加()

小程序.js

data:{//...
},
方法名(){...}

事件对象
在小程序的事件处理函数，可以带有event参数，该参数代表事件对象
事件对象在小程序当中，按照此种层级展开：

(1)基础事件(BaseEvent)
BaseEvent是object类型，包含以下属性：

①id属性
id属性表示事件源组件的id，string类型
②type属性
type属性表示事件类型，string类型

③target属性
target属性表示触发事件的组件对象，object类型

{id:事件源组件的id,string类型offsetTop:距屏幕左上角的垂直距离offsetLeft:距屏幕左上角的水平距离//在组件上有data-*的自定义属性所组成的对象dataset:{//由多个短横线分割的属性将自动转换为驼峰标记法//属性名称中的大写字母将自动转换为小写字母}
}

④currentTarget属性 object类型
currentTarget属性表示事件绑定的当前组件对象，object类型

{id:事件源组件的id,string类型offsetTop:距屏幕左上角的垂直距离offsetLeft:距屏幕左上角的水平距离//在组件上有data-*的自定义属性所组成的对象dataset:{//由多个短横线分割的属性将自动转换为驼峰标记法//属性名称中的大写字母将自动转换为小写字母}
}

事件绑定时，获取数据：
dataset是在组件上自定义属性所组成的对象
自定义属性还有id class style hidden data-* bind*/cathch*又叫公共属性

获取数据时可以通过event对象

event.target.dataset / event.currentTarget.dataset获取到数据
这种传参的方式，只适用于原生的事件属性
这是商品数据存储的属性以及存储的方式

由图可以看出，target属性和currentTarget属性都是object类型

这2个属性中都存在dataset，通过event对象，以data-*将数据传回触发事件的方法内

targrt和currentTarget的区别

<view data-tag="outer" bindtap="tap"><view data-tag="inner" bindtap="tap">轻敲我</view>
</view>

tap(event){console.log(event.target.dataset);----------------------------------console.log(vent.currentTarget.dataset);
}

当点击outer的view时，返回的结果(target和currentTarget都是outer)

{target :"outer"}
-------------------
{target : "outer"}

当点击inner的view时，返回的结果(target是inner，currentTarget是outer)

{target:"inner"}
--------------------
{target:"outer"}

target属性，无论点击的是inner的view还是outer的view，最后target的都是触发事件的组件对象
currentTarget属性，当点击的是inner的view时，发生冒泡，最后currentTarget的是最后冒泡到的组件对象，也就是outer的view

实例：点击按钮删除5号商品的信息

<button bindtap="delete" data-id="5">删除5号商品</button>

delete(e){console.log(e.target.dataset);//这个e.target.dataset就是id 返回的结果是 {id:"5"}//因为target属性是object类型，所以返回的是对象
}

(2)自定义事件(CustomEvent)

不同组件的自定义事件是不同的，如<form>组件存在bindsubmit事件，组件存在bindinput事件，<slider>组件则存在bindchanging事件等

detail属性表示自定义事件所携带的数据所形成的对象
示例代码：

<input type="text" bindinput="input"></input>

input(event){console.log(event.detail.value);
}

在逻辑层获取数据的方法

在逻辑层获取数据的方法

A.视图层通过原生事件(如touchstart，bindtap)进行数据传递，此时的操作步骤如下：
第一步：首先在组件上通过data-*实现自定义属性
第二步：在逻辑层通过event.target.dataset.*进行获取
B.视图层通过组件的自定义事件(如：input组件的bindinput)进行数据传递，
此时操作步骤如下：
直接在逻辑层通过event.detail.*进行获取

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详细组件定义中的各个事件的定义。

现在可以对WeChat applet(2)中的部分组件添加事件~
原生的事件，公共属性，加给哪个元素都行~
复选框和单选框都不能只写一个，没有意义

单选框复选框开关选择器 --> bindchange
滑块 --> bindchanging

实例代码1：

<picker mode="selector" range="{{educations}}" value="4"bindchange="changeeducation"><text>学历：</text>
</picker>
<picker mode="selector" range="{{sex}}" range-key="label"bindchange="changesex"><text>性别：</text>
</picker>

  data: {educations:["专科","本科","研究生","硕士","博士"],sex:[{label:"男",value:1},{label:"女",value:2}]},changeeducation(event){console.log(this.data.educations[event.detail.value]);console.log(event.detail.value);},changesex(event){console.log(this.data.sex[event.detail.value]);console.log(event.detail.value);},

关于小程序事件绑定的问题汇总：

WeChat applet 微信小程序(3) 事件绑定相关推荐

WeChat applet 微信小程序(1)
微信小程序 Wechat applet 微信小程序开发工具下载网址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download ...
weChat applet 微信小程序(2) WXSS 小程序组件
WXSS 概述: WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML组件的样式 WXSS具有CSS的大部分特性,但对其进行了扩展: 尺寸单位 rpx(Resonsive ...
微信小程序 input事件绑定
⼩程序中绑定事件,通过bind关键字来实现.如 bindtap bindinput bindchange 等不同的组件⽀持不同的事件,具体看组件的说明即可. 下面举例 input 内容被改变怎么触 ...
【微信小程序】事件绑定
✅作者简介:CSDN内容合伙人.阿里云专家博主.51CTO专家博主
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
微信小程序学习4：小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等.当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效 ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法解决方案:将绑定事件的bindt ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...

WeChat applet 微信小程序(3) 事件绑定

WeChat applet 事件绑定

WeChat applet 微信小程序(3) 事件绑定相关推荐

最新文章

热门文章