[JavaScript知识库]原生小程序小话题——事件绑定

这一部分主要是事件小课题，关于绑定的写法规则和一些注意事项。

第一部分 事件绑定的基础写法

我们准备在一个按钮组件上绑定事件，同时通过事件对象取出我们的参数

1.在标签上绑定事件和参数

<!-- 测试在button上绑定事件 -->
<button type="primary" bindtap="bindEventTest" data-myName="黄烽" data-myAge="19">该按钮测试事件绑定</button>

看上面这一段wxml的代码，bindtap就是绑定事件，具体有哪些事件，大家可以去官网上看一看

这里明显是将这个事件绑定到了js中的bindEventTest的函数，也就是定义在js文件Page对象中的这样的一个函数，这样就形成了一个类似vue的写法

Page({
    //Page中的其他内容
    bindEventTest(event){
    console.log(event)
    let{myname,myage}=event.currentTarget.dataset
    console.log(`我是天下无敌的${myname},我今年${myage}岁`)
  }
    //page对象中的其他内容
})

看这个函数，就知道我们还缺两个参数，一个myname，另一个是myage。这一部分传参的写法和vue的是不一样的，实际上是定义在标签上的，以“data-”为开头的两个数据，这里可以再看一下我们的button标签

<button type="primary" bindtap="bindEventTest" data-myName="黄烽" data-myAge="19">该按钮测试事件绑定</button>

这两个数据将在事件对象中被拿取，这里我们看一下

?实际上无论你绑定多少个data，都会在dataset当中形成一个对象，所以上面我们使用了一个结构将其取出。

当然在绑定参数的时候要注意html的不区分大小写问题，这里我在上面没写出来data-my-Name,实际在dataset中拿到参数的时候会变成myName，这一点要注意

第二部分 事件的细分

1.取消冒泡

具体的事件可以到官网上去看，官方文档是最全的，这里我们说一说事件的冒泡和捕获两种形式，默认的所有事件都是冒泡的。这里需要提醒一下，我们上面用到的事件绑定bindtap实际上是bind（绑定）+tap（行为），如果要是使用“catch+行为”进行绑定则可以让绑定的事件不再冒泡，可以看一下下面的例子

<view class="out" bindtap="bindOutEvent">
  <button type="primary" bindtap="bindEventTest" data-myName="黄烽" data-myAge="19" >该按钮测试事件绑定</button>
</view>

我在按钮外层包裹了一个out类的view标签，然后绑定了bindOutEvent，点击按钮之后，两个函数都会触发

<view class="out" bindtap="bindOutEvent">
<view class="middle" catchtap="bindMiddleEvent">
  <button type="primary" bindtap="bindEventTest" data-myName="黄烽" data-myAge="19" >该按钮测试事件绑定</button>
</view>
</view>

我又在两层之间加了一个middle类，用catch的方式绑定了一个bindMiddleEvent的函数，点击按钮，实际上out层的函数就不再执行，被阻止了。

我看了一下文档，bindtap可以写成bind:tap，catchtap也可以写成catch:tap，因为有开发工具的提示，所以不必纠结这个。

2.互斥绑定

好家伙，绑定还有互斥锁，同样是写个例子

<view class="out" bind:tap="bindOutEvent">
    <view class="middle" mut-bind:tap="bindMiddleEvent">
      <button type="primary" mut-bind:tap="bindEventTest" data-myName="黄烽" data-myAge="19">该按钮测试事件绑定</button>
    </view>
  </view>

上面的例子中button和middle层互斥，所以"bindEventTest和最外层的bindOutEvent会执行。

3.捕获绑定

实际上就是和冒泡相反的传递事件的循序，采用的是“capture-bind：行为”这样的写法，另外还有

“capture-catch：行为”这样的写法，这样的话事件的捕获过程将被取消，看一下例子

<view class="out" capture-bind:tap="bindOutEvent">
    <view class="middle" capture-catch:tap="bindMiddleEvent">
      <button type="primary" bind:tap="bindEventTest" data-myName="黄烽" data-my-age="19">该按钮测试事件绑定</button>
    </view>
  </view>

这里的话，就是out层先执行，middle执行然后阻止事件继续向下传，button的事件也就不能触发。

以上就是有关原生小程序事件绑定的内容，当然只是挑了部分重要的写了，其余的知识点可以看看文档。