仿制型模板网站,网络服务器的分类,大型企业网络搭建,网站文章优化知识点1#xff1a;什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为#xff0c;反馈到逻辑层进行业务的处理。
知识点2#xff1a;小程序中常用的事件
类型绑定方式事件描述tapbindtap或bind:tap手指触摸后马上离开#xff0c;类似于…知识点1什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理。
知识点2小程序中常用的事件
类型绑定方式事件描述tapbindtap或bind:tap手指触摸后马上离开类似于 HTML中的click 事件inputbindinput 或 bind:input文本框的输入事件changebindchange 或 bind:change状态改变时触发
知识点3事件对象的属性列表
当事件回调触发的时候会收到一个事件对象event它的详细属性列表如下
属性类型typeString事件类型timeStampInteger页面打开到触发事件所经过的毫秒数targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合detailObject额外的信息touchesArray触摸事件当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件当前变化的触摸点信息的数组
知识点4target和currentTarget的区别
target是触发该事件的源头组件而currentTarget则是当前事件所绑定的组件。
button
bind:taptargetClick
typeprimary
plaintrue
id123
target按钮/button
Page({targetClick(event){console.log(event)}
})
{type: tap, timeStamp: 2827, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: 123, offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 165.15625, y: 35.328125}
mark: {}
mut: false
target: {id: 123, offsetLeft: 0, offsetTop: 0, dataset: {…}}
timeStamp: 2827
touches: [{…}]
type: tap
__evName: tap
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: target按钮, anchorRelatedText: , anchorTapTime: 1737007035902}
_requireActive: true
_userTap: true
__proto__: Object view bind:taptargetClick id456 button typeprimary
id123
target按钮/button/view
Page({targetClick(event){console.log(event)}
})
{type: tap, timeStamp: 4896, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: 456, offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 97.828125, y: 60.65625}
mark: {}
mut: false
target: {id: 123, offsetLeft: 0, offsetTop: 25, dataset: {…}}
timeStamp: 4896
touches: [{…}]
type: tap
__evName: tap
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: target按钮, anchorRelatedText: , anchorTapTime: 1737007515471}
_requireActive: true
_userTap: true
__proto__: Object
点击内部的按钮时点击事件以冒泡的方式向外扩散也会触发外层view 的tap 事件处理函数。target 指向的是触发事件的源头组件因此target是内部的按钮组件。事件的触发者currentTarget 指向的是当前正在触发事件的那个组件因此e.currentTarget 是当前的 view 组件。事件的响应者
知识点5bindtap 语法格式
在小程序中不存在HTML中的onClick鼠标点击事件而是通过tap事件来响应用户的触摸行为。
!-- 定义 --
button typeprimary bindtapbtnTapHandler登录/button
Page({//bindtap的实现btnTapHandler(e){console.log(e)}
})
知识点6在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法进行赋值。
!-- 定义 --
button typeprimary bindtapchangeCountHandler当前计数{{countNum}}/button
Page({data:{
countNum:0
},
//target 实现targetClick(event){console.log(event)},//bindtap 实现btnTapHandler(e){console.log(e)},//data 赋值changeCountHandler(e){this.setData({countNum:this.data.countNum1})}
})
知识点7事件传参
可以为组件提供data-*自定义属性传参其中*代表的是参数的名字。通过event中解析出传递的参数。
!-- 如果传递数字需要用{{}}包括否则默认为字符串 --
button typeprimary bindtapeventHandler data-nameJeck data-age{{18}}事件传参/button //data 事件传参eventHandler(e){console.log(e.target.dataset.name);}
知识点8bindinput的语法格式
在小程序中通过input事件来响应文本框的输入事件。
view------------------bindinput--------------------/view
input bind:tapinputHandler placeholder请输入/input //input 事件inputHandler(e){console.log(e)}
