WXML模版语法-事件绑定

知识点1：什么是事件

• 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

知识点2：小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtap或bind:tap	手指触摸后马上离开，类似于 HTML中的click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

知识点3：事件对象的属性列表

• 当事件回调触发的时候，会收到一个事件对象event，它的详细属性列表如下：

属性	类型
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

知识点4：target和currentTarget的区别

• target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

<button 
bind:tap="targetClick" 
type="primary" 
plain="true" 
id="123" 
>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:tap="targetClick" id="456" ><button type="primary" 
id="123" 
>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 组件。（事件的响应者）

知识点5：bindtap 语法格式

• 在小程序中，不存在HTML中的onClick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

<!-- 定义 -->
<button type="primary" bindtap="btnTapHandler">登录</button>

Page({//bindtap的实现btnTapHandler(e){console.log(e)}
})

知识点6：在事件处理函数中为data中的数据赋值

• 通过调用this.setData(dataObject)方法进行赋值。

<!-- 定义 -->
<button type="primary" bindtap="changeCountHandler">当前计数：{{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.countNum+1})}
})

知识点7：事件传参

• 可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字。
• 通过event中解析出传递的参数。

<!-- 如果传递数字需要用{{}}包括，否则默认为字符串 -->
<button type="primary" bindtap="eventHandler" data-name="Jeck" data-age="{{18}}">事件传参</button>

 //data 事件传参eventHandler(e){console.log(e.target.dataset.name);}

知识点8：bindinput的语法格式

• 在小程序中，通过input事件来响应文本框的输入事件。

<view>------------------bindinput--------------------</view>
<input bind:tap="inputHandler" placeholder="请输入"></input>

  //input 事件inputHandler(e){console.log(e)}