157 lines
4.4 KiB
Markdown
157 lines
4.4 KiB
Markdown
# 用户交互核心—事件
|
||
|
||
|
||
|
||
> 在文档的开篇，提到了【渲染层】和【逻辑层】，关于这一部分知识我们会在后面第四章【小程序架构篇】进行介绍。
|
||
|
||
|
||
|
||
**快速入门示例**
|
||
|
||
通过 bind + 事件类型，例如下面的 bindtap 就是绑定了一个 tap 类型的事件
|
||
|
||
```wxml
|
||
<view class="test" bindtap="tapHandle">
|
||
<text class="abc">this is a test</text>
|
||
</view>
|
||
```
|
||
|
||
接下来在 Page 构造函数中，书写对应的事件处理函数。
|
||
|
||
在事件处理函数中，会自动传入一个参数，该参数就是事件对象。
|
||
|
||
```js
|
||
Page({
|
||
data: {
|
||
// ...
|
||
},
|
||
// 事件处理函数
|
||
// 会自动传入一个参数，该参数为此次事件对应的事件对象
|
||
tapHandle(e){
|
||
console.log('你触发了点击事件');
|
||
console.log(e);
|
||
}
|
||
})
|
||
```
|
||
|
||
|
||
|
||
**事件类型**
|
||
|
||
在上面的示例中，我们绑定的是一个 tap 事件，它是在点击的时候触发。
|
||
|
||
具体有的事情，如下表所示：
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-11-020549.png" alt="image-20230111100549023" style="zoom:45%;" />
|
||
|
||
更多的事件类型，请参阅官方文档：*https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000846df9a03909b0086a50025180a*
|
||
|
||
longtap 和 longpress 的区别在于，如果同时还绑定了 tap 事件，那么longpress并不会再次触发tap事件，而longtap则会再次触发tap事件。
|
||
|
||
|
||
|
||
**事件对象**
|
||
|
||
我们在前面的例子中，看到了事件对象会自动传入到事件处理函数。
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-11-020834.png" alt="image-20230111100833539" style="zoom:50%;" />
|
||
|
||
我们先来看 detail，这个可以获取一些额外的信息：
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-11-021214.png" alt="image-20230111101214305" style="zoom:50%;" />
|
||
|
||
target 和 currentTarget：
|
||
|
||
- currentTarget：为当前事件所绑定的组件
|
||
- target：则是触发该事件的源头组件。
|
||
|
||
示例如下：
|
||
|
||
```wxml
|
||
<view class="outter" bindtap="tapHandle2" data-id="outter">
|
||
<view class="innter" data-id="innter"></view>
|
||
</view>
|
||
```
|
||
|
||
```js
|
||
tapHandle2(e){
|
||
console.log("target: ",e.target);
|
||
console.log("currentTarget: ",e.currentTarget);
|
||
}
|
||
```
|
||
|
||
效果如下：
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-11-022258.png" alt="image-20230111102258282" style="zoom: 50%;" />
|
||
|
||
|
||
|
||
**事件冒泡以及阻止冒泡**
|
||
|
||
首先，在小程序中的事件，如果是采用的 bind 进行的绑定，会和 DOM 的事件流一样，有一个事件冒泡的行为：
|
||
|
||
```wxml
|
||
<view class="outter" bindtap="outtertap" data-id="outter">
|
||
<view class="innter" data-id="innter" bindtap="innertap"></view>
|
||
</view>
|
||
```
|
||
|
||
```js
|
||
outtertap(e){
|
||
console.log("触发了 outter 事件");
|
||
},
|
||
innertap(){
|
||
console.log("触发了 inner 事件");
|
||
}
|
||
```
|
||
|
||
在上面的代码中，如果我们针对 inner 进行点击，那么，事件会一直向上冒泡，outter 组件的 tap 事件也会触发。
|
||
|
||
可以通过 catch 来绑定事件，使用 catch 绑定的事件，不会向上冒泡。
|
||
|
||
示例如下：
|
||
|
||
```wxml
|
||
<view class="outter" bindtap="outtertap" data-id="outter">
|
||
<view class="middle" catchtap="middletap" data-id="middle">
|
||
<view class="inner" data-id="inner" bindtap="innertap"></view>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
```js
|
||
outtertap(){
|
||
console.log("触发了 outter 事件");
|
||
},
|
||
middletap(){
|
||
console.log("触发了 middle 事件");
|
||
},
|
||
innertap(){
|
||
console.log("触发了 inner 事件");
|
||
}
|
||
```
|
||
|
||
在上面的示例中，因为 inner 是使用 bind 来绑定的，所以会向上冒泡，触发 middle 的 tap 事件，但是 middle 绑定 tap 事件的时候，使用的是 catch 来绑定，catch 会阻止冒泡。
|
||
|
||
|
||
|
||
**事件捕获**
|
||
|
||
从基础哭 1.5.0 开始，bind 和事件类型之间可以加一个冒号
|
||
|
||
例如以前是 bindtap="事件处理函数"，就可以写作 bind:tap="事件处理函数"
|
||
|
||
如果想要使用事件捕获，可以通过 capture-bind 来绑定事件，示例代码如下：
|
||
|
||
```wxml
|
||
<view class="outter" capture-bind:tap="outtertap" data-id="outter">
|
||
<view class="middle" capture-bind:tap="middletap" data-id="middle">
|
||
<view class="inner" data-id="inner" capture-bind:tap="innertap"></view>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
|
||
|
||
这节课结束之后，请通读官方文档对应的：*https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000846df9a03909b0086a50025180a*
|