微信小程序day01_10之小程序的事件触发

深碍√TFBOYSˉ_ 2022-03-12 10:39 305阅读 0赞

### 文章目录 ###

*   *   *  一.小程序的事件介绍
         *  二.事件的绑定和冒泡

本文代码: [https://gitee.com/jaythc/wxxcx\_learen/tree/master/day01/day01\_10/ownPageLife][https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_10_ownPageLife]

### 一.小程序的事件介绍 ###

什么是事件

*  事件是视图层到逻辑层的通讯方式。
 *  事件可以将用户的行为反馈到逻辑层进行处理。
 *  事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
 *  事件对象可以携带额外信息，如 id, dataset, touches。
 *  通过行为进行人机交互
 *  类似于html里的onClick onChange 事件等等

代码示例  
在event.wxml中写如下的代码, 使用bindtap 来进行绑定点击事件

<view class="container">
        <view id="tapTest" bindtap="clickMe">Click me!</view>
    </view>

在event.js中, 编写如下的代码, 进行事件的操作

Page({ 
      data: { 
      
      },
      clickMe: function(){ 
        console.log("被点击事件触发");
      }
    })

自定义值的设定, 在wxml中定义如下的数据

<view class="container">
        <view id="tapTest" data-customdata='1979-1-18' data-customname='周杰伦' data-customsex='男' bindtap="clickMe">Click me!</view>
    </view>

在js中获取如下

Page({ 
      data: { 
      
      },
      clickMe: function(e){ 
        console.log("被点击事件触发");
        console.log(e);
    
        var customdata = e.currentTarget.dataset.customdata;
        var customname = e.currentTarget.dataset.customname;
        var customsex = e.currentTarget.dataset.customsex;
    
        console.log(customdata);
        console.log(customname);
        console.log(customsex);
      }
    })

控制台打印如下: 说明成功获取到了wxml中的数据  
![20190305200935727.png][]

事件分类  
事件分为冒泡事件和非冒泡事件：

*  冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
 *  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

小程序的冒泡事件列表:  
touchstart 手指触摸动作开始  
touchmove 手指触摸后移动  
touchcancel 手指触摸动作被打断，如来电提醒，弹窗  
touchend 手指触摸动作结束  
tap 手指触摸后马上离开  
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0  
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）  
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发  
animationstart 会在一个 WXSS animation 动画开始时触发  
animationiteration 会在一个 WXSS animation 一次迭代结束时触发  
animationend 会在一个 WXSS animation 动画完成时触发

### 二.事件的绑定和冒泡 ###

事件绑定的写法同组件的属性，以 key、value 的形式。

*  key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
 *  value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。  
    bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
      </view>
    </view>

更多详细内容,可以参考官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_event.html]

[https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_10_ownPageLife]: https://gitee.com/jaythc/wxxcx_learen/tree/master/day01/day01_10/ownPageLife
[20190305200935727.png]: /images/20220312/03a2cf5a03f642fe8ab89276376ab61b.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_event.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html