微信小程序7 事件绑定，传值，嵌套传值

之前介绍的控件，比如按钮，单选，复选这些，通常我们都需要绑定相应的事件来实现功能。

以button为例

找到之前我们test页面的按钮，使用bind:tap绑定js事件

<button bind:tap="clickBtn1">我是按钮1</button>

在test.js中追加方法

  clickBtn1(){
    console.log("btn1 is click");
  }

保存后点击按钮，控制台打印出了 btn1 is click。

 

以input输入框为例

输入框我们通常会监听输入内容，用bindinput监听

<input type="text" bindinput="changeInput"></input>

js方法

  changeInput(e){
    console.log(e.detail.value);
  }

打印出改变后的值，注意这种输入框实时变化的值用e.detail.value获取。

 

传值

跟html中调用js方法不一样，不是 方法名（参数1，参数2）这么传值。

以第一个button的点击事件为例，如果我们要传参数

<button bind:tap="clickBtn1" data-id="1001" data-name="张三">我是按钮1</button>

data-id和data-name是特殊的命名方式，“data-”是固定部分，后面跟的是我们自定义的参数名。

在js中，通过e.currentTarget.dataset.参数名获取。

  clickBtn1(e){
    console.log(e.currentTarget.dataset.id+":"+e.currentTarget.dataset.name);
  },

e和上面输入框的示例一样，是触发事件的元素对象，e.currentTarget表示当前对象本身。

同时我们还发现有e.target，结构和e.currentTarget一样，它有什么用呢？

 

e.currentTarget 和 e.target

举例三个view嵌套了

<view bind:tap="clickView" data-a="1001">我是外层的View

  <view data-b="2001">我是中层的View

    <view data-c="3001">我是内层的View</view>

  </view>

</view>

我们在clickView方法中打印e，可以发现

当点击外层view的时候，e.currentTarget.dataset和e.target.dataset都是 a: "1001"，并没有b和c的存在。

当点击中层view时，e.currentTarget.dataset是 a: "1001"，e.target.dataset都是 b: "2001"，并没有c的存在。

当点击内层view时，e.currentTarget.dataset是 a: "1001"，e.target.dataset都是 c: "3001"，并没有b的存在。

也就是说，currentTarget永远是最外层的元素对象，target则是实际选中的子元素对象，我们通过运用这两个，可以灵活获取不同位置的参数。