二十三.事件

阳光穿透心脏的1/2处 2023-07-09 02:23 15阅读 0赞

# 事件 #

## 一.什么是事件 ##

1.  事件是视图层到逻辑层的通讯方式.
2.  事件可以将用户的行为反馈到逻辑层进行处理.
3.  事件可以绑定到组件上, 当达到触发事件, 就会执行逻辑层中对应的事件处理函数.
4.  事件对象可以携带额外信息, 如id, dataset, touches

## 二.事件的使用方式 ##

> 事件时通过bind/catch这个属性绑定在组件上的, 从1.5.0版本开始, 可以在bind/catch后面写一个冒号

1.  在组件中绑定一个事件处理函数
    
    如`bindtap`, 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数
    
        <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
2.  在相应的Page定义中写上相应的事件处理函数, 参数是event
    
        Page({ 
            tapName: function(event){ 
                console.log(event)
            }
        })

## 三.常见事件类型 ##

1.  某些组件会有自己特性的事件类型

*  input有bindinput/bindblur/bindfocus等
 *  scroll-view有bindscrolltowpper/bindscrolltolower等

1.  组件都有, 并且也比较常见的事件类型

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>触发条件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touchstart</td> 
   <td>手指触摸动作开始</td> 
  </tr> 
  <tr> 
   <td>touchmove</td> 
   <td>手指触摸后移动</td> 
  </tr> 
  <tr> 
   <td>touchcancel</td> 
   <td>手指触摸动作被打断, 如来电提醒,弹窗</td> 
  </tr> 
  <tr> 
   <td>touchend</td> 
   <td>手指触摸动作结束</td> 
  </tr> 
  <tr> 
   <td>tap</td> 
   <td>手指触摸后马上离开</td> 
  </tr> 
  <tr> 
   <td>longpress</td> 
   <td>手指触摸后, 超过350ms再离开, 如果指定了事件回调函数并触发了这个事件, tap事件将不被触发</td> 
  </tr> 
  <tr> 
   <td>longtap</td> 
   <td>手指触摸后, 超过350ms再离开(推荐使用longpress事件代替)</td> 
  </tr> 
 </tbody> 
</table>

## 四.事件对象 ##

> 当某个事件触发时, 会产生一个事件对象, 并且这个对象被传入回调函数中

### 事件对象常见的属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>事件类型</td> 
  </tr> 
  <tr> 
   <td>timeStamp</td> 
   <td>Integer</td> 
   <td>页面打开到触发事件所经过的毫秒数</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>Object</td> 
   <td>触发事件的组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>Object</td> 
   <td>当前组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td>detail</td> 
   <td>Object</td> 
   <td>额外的信息</td> 
  </tr> 
  <tr> 
   <td>touches</td> 
   <td>Array</td> 
   <td>触摸事件, 当前停留在屏幕中的触摸点信息数组</td> 
  </tr> 
  <tr> 
   <td>changedTouches</td> 
   <td>Array</td> 
   <td>触摸事件, 当前变化的触摸点信息的数组</td> 
  </tr> 
 </tbody> 
</table>

### touches和changedTouches的区别 ###

1.  在touchend中不同
2.  多手指触摸时不同
    
    touches: 用来记录当前有几个手指在小程序中触摸的, 以及对应的触摸点的信息
    
    changeTouches: 记录变化, 所以数组中只有变化之后的对象.

### currentTarget和target的区别 ###

如果事件发生冒泡, 触发的事件和产生的事件可能不同

currentTarget: 触发事件的view

target:产生事件的view

## 五.事件的传递参数 ##

> 当视图层发生事件时, 某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过data-属性来完成

1.  格式: data-属性的名称
2.  获取: e.currentTarget.dataset.属性的名称

<view class="container">
        <block wx:for="{ {titles}}" wx:key="{ {index}}">
        	<view class='item' bindtap="handleItemClick" data-index="{ {index}}" data-item="{ {item}}">
            </view>
        </block>
    </view>

Page({ 
        data:{ 
            titles:['香蕉','苹果','橘子']
        },
        handleItemClick(event){ 
            console.log(event)
            const dataset = event.currentTarget.dataset;
            const title = dataset.item;
            const index = dataset.index;
            console.log(title.index)
        }
    })

.container{ 
        display:flex;
    }
    .item{ 
        flex:1;
        text-align:center;
    }

## 六.事件冒泡和事件捕获 ##

1.  当界面产生一个事件时, 事件分为捕获阶段和冒泡阶段. 事件捕获是从外到里, 事件冒泡是从里到外
2.  bind:一层层传递
    
    catch:阻止事件进一步传递

Page({ 
        handleCaptureView1(){ 
            console.log('handleCaptureView1')
        },
        handleBindView1(){ 
            console.log('handleBindView1')
        },
        handleCaptureView2(){ 
            console.log('handleCaptureView2')
        },
        handleBindView2(){ 
            console.log('handleBindView2')
        },
        handleCaptureView3(){ 
            console.log('handleCaptureView3')
        },
        handleBindView3(){ 
            console.log('handleBindView3')
        },
    })