小程序事件绑定

事件基础

// pages/demo05/index.wxml
<button bind:tap="clickHandle">点我触发事件</button>

// pages/demo05/index.js
Page({
  clickHandle(){
    console.log('点击了按钮');
  }
})

事件传参

// pages/demo05/index.wxml
<button data-aaa="{{ 111 }}" data-bbb="你好" bind:tap="clickHandle">点我并传参</button>

// pages/demo05/index.js
Page({
  clickHandle(e){
    console.log('点击了按钮', e.currentTarget.dataset);    // 结果：{ aaa: 111,  bbb: "你好"}
  }
})

小程序 和 Vue 事件绑定差别

1. 小程序事件绑定不能使用 @ 符号简写，需使用 bind 这种写法。
2. 小程序中删除了 click 事件类型，用 tap 事件取代 click 事件。
3. 小程序的事件处理函数直接 Page({ }) 结构的第一层，不需要写到 methods 结构中。
4. 小程序的事件传参，需要配合自定义属性 data-xxx 实现参数传递，通过 e.currentTarget.dataset 获取。

target 和 currentTarget 区别

target 和 currentTarget 区别

target： 触发事件的元素。

currentTarget ： 绑定事件的元素。

PS：网页端同理，小程序端其实是借鉴了网页端的target 和 currentTarget 。

更稳妥的事件参数获取

• 在小程序中事件参数获取建议使用 currentTarget 。🚩
• 因为currentTarget 表示 绑定事件的元素。
• 不管点击元素自身还是子元素，currentTarget 都可以正确获取到事件绑定时传递的参数。