WXML模版语法-事件绑定

知识点1：什么是事件

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

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

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

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

知识点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)
  }