这一部分主要是事件小课题,关于绑定的写法规则和一些注意事项。
第一部分 事件绑定的基础写法
我们准备在一个按钮组件上绑定事件,同时通过事件对象取出我们的参数
1.在标签上绑定事件和参数
- <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的事件也就不能触发。
以上就是有关原生小程序事件绑定的内容,当然只是挑了部分重要的写了,其余的知识点可以看看文档。