微信小程序-事件（event）

一.事件绑定和事件对象

微信小程序使用bind方法绑定事件
第一种方式：bind：事件名
第二种方式：bind事件名（简写）
事件处理函数写在.js文件的page方法里面
下面介绍两种事件对象button和input
可以在.wxml里面创建button和input组件

<button type="primary" bind:tap="handle">事件绑定</button>
<input type="text" bindinput="getInputVal" />

其中input组件创建好之后没有边框，需要在.scss里面添加边框方便查看

input{
  border: 1px solid #cccccc;
}

然后在.js文件里面写相应的函数逻辑，函数名和绑定的事件名必须一致，且必须写在page方法里面，每个函数都会自带一个event参数

Page({
  handle(event){
    // console.log("事件触发了~~~")
    // console.log(event)
  },
  getInputVal(event){
    // console.log(event.detail.value)
  }
})

二.冒泡事件和阻止冒泡事件

冒泡事件是当一个组件被触发后，该事件会向父节点传递
如果想阻止冒泡事件，可以用catch绑定事件

在.wxml里面添加两个按钮，分别用bind和catch绑定

<view class="catch" bind:tap="parentHandler">
<button bind:tap="btnHandler">按钮1</button>
<button catch:tap="btnHandler">按钮2</button>
</view>

点击第一个按钮会触发bind:tap=“parentHandler”，点击第二个按钮就不会触发父节点

三.事件传参

组件使用data-*进行传参
传参的时候event事件里面有两个参数：
currentTarget：事件绑定者，那个组件绑定了当前事件处理函数
target：事件触发者，那个组件触发了当前事件处理函数

<view bind:tap="parentHandler" data-id="2" data-name-parent="tom2">
<button bind:tap="btnHandler" data-id="1"
data-name="tom">
按钮</button>
</view>

Page({
  btnHandler(event){

    console.log(event.currentTarget.dataset.id)//输出1
    console.log(event.target.dataset.id)//输出1
  },
  parentHandler(event){
    console.log(event)
    console.log(event.currentTarget.dataset.id)//输出2
    console.log(event.target.dataset.id)//输出1
  } } )

四.mark传参

使用mark进行传参，获取的是事件触发者到绑定者身上的所有数据。
点击按钮id=1和2的数据都会获取到

<view mark:id-parent="2" bind:tap="parentHandler">
<button bind:tap="btnHandler" 
mark:id= "1" mark:name="tom">按钮</button>
</view>

五.驼峰命名法

data-id="2"如果写成data-id-parent，那么在event事件的参数里面的命名为idParent