Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2040440
  • 博文数量: 162
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 4970
  • 用 户 组: 普通用户
  • 注册时间: 2013-10-23 19:15
  • 认证徽章:
个人简介

等等等等等, 不忘初心,方能始终。技术讨论QQ群:150633458

文章分类

全部博文(162)

文章存档

2018年(10)

2016年(20)

2015年(60)

2014年(41)

2013年(31)

分类: Web开发

2018-03-13 19:46:05

一、什么是事件

1、事件是视图层到逻辑层的通讯方式。

2、事件可以将用户的行为反馈到逻辑层进行处理。

3、事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

4、事件对象可以携带额外信息,如 id, dataset, touches


二、事件的使用方式

1、在组件中绑定一个事件处理函数。如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。


点击(此处)折叠或打开

  1. <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click </view>


2、在相应的Page定义中写上相应的事件处理函数,参数是event


点击(此处)折叠或打开

  1. Page({
  2.   tapName: function(event) {
  3.     console.log(event)
  4.   }
  5. })


之后就可以在控制台看到相应的输出信息,当然在处理事件的时候,打印是最常用的调试手段。从上面的案例可以看到,bindtap的值和js文件中的处理函数名字要一样,这样才可以形成一一对应


三、事件的分类

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

1、冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递

2、非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递

Wxml的冒泡事件列表

类型

触发条件

touchstart

手指触摸动作开始

touchmove

手指触摸后移动

touchcancel

手指触摸动作被打断,如来电提醒,弹窗

touchend

手指触摸动作结束

tap

手指触摸后马上离开

longpress

手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

longtap

手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

transitionend

会在 WXSS transition wx.createAnimation 动画结束后触发

animationstart

会在一个 WXSS animation 动画开始时触发

animationiteration

会在一个 WXSS animation 一次迭代结束时触发

animationend

会在一个 WXSS animation 动画完成时触发

touchforcechange

在支持 3D Touch iPhone 设备,重按时会触发

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如

submit事件,input事件,scroll事件,(详见各个组件)



四、事件的绑定和冒泡

事件绑定的写法同组件的属性,以 keyvalue 的形式。

l   key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、、catch:touchstart。

l   value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

l   bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

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


点击(此处)折叠或打开

  1. <view id="outer" bindtap="handleTap1">
  2.   outer view
  3.   <view id="middle" catchtap="handleTap2">
  4.     middle view
  5.     <view id="inner" bindtap="handleTap3">
  6.       inner view
  7.     </view>
  8.   </view>
  9. </view>



五、事件的捕获阶段

自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。


点击(此处)折叠或打开

  1. <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  2.   outer view
  3.   <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  4.     inner view
  5.   </view>
  6. </view>


如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。


点击(此处)折叠或打开

  1. <view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  2.   outer view
  3.   <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  4.     inner view
  5.   </view>
  6. </view>


六、事件绑定实例

1、本实例演示一个树状的结构,当点击某个项目的时候,首先要知道他的父目录id,然后是项目id,这两个id同时决定了跳转的页面

2、wxml文件


点击(此处)折叠或打开

  1. <template name="foldTemplate">
  2.     <!--捕获tap,捕获由外到内传递-->
  3.     <view class="fold-container" capture-bind:tap='onFoldCapture' data-fold-id="{{foldId}}" >
  4.         <!--需要设置自定义数据,将view的序号传入到js文件-->
  5.         <view class='fold-head' bindtap='onFoldLaunch' data-current-id="{{foldId}}">
  6.            <!--根据isLaunch的值来选择图片-->
  7.             <image class="fold-img" src="{{isLaunch===1?'/images/arrow-down.jpg':'/images/arrow-right.jpg'}}"></image>
  8.             <text class="fold-text">{{foldName}}</text>
  9.         </view>
  10.         <!--根据子元素的个数来利用for循环-->
  11.         <block wx:for="{{foldSub}}">
  12.             <!--根据isLaunch的值来判断子元素是否要显示-->
  13.             <!--需要设置自定义数据,将view的序号传入到js文件-->
  14.             <view class='fold-content' wx:if="{{isLaunch}}" bindtap='onSubjectTap' data-subject-id="{{index}}">
  15.                 <text class='fold-subject'>{{item}}</text>
  16.             </view>
  17.         </block>
  18.     </view>
  19. </template>


3、js文件


点击(此处)折叠或打开

  1. Page({
  2.   
  3.     //条目点击事件,根据不同的条目进行页面跳转
  4.     onSubjectTap: function(event){
  5.         var that = this;
  6.         //获取当前子元素的序号
  7.         console.log("subject id: " + event.currentTarget.dataset.subjectId);
  8.         var subjectId = event.currentTarget.dataset.subjectId;
  9.         console.log(that.data.fold[currentFoldId].foldSubUrl[subjectId]);
  10.         //跳转到对应的页面,将当前目录和子项的id传入
  11.         wx.navigateTo({
  12.             url: that.data.fold[currentFoldId].foldSubUrl[subjectId] + "?foldId="+currentFoldId+"&subjectId="+subjectId,
  13.         })
  14.     },
  15.   
  16.     //目录事件捕获,捕获发生在冒泡之前,而且捕获是由外到内的
  17.     onFoldCapture: function(event){
  18.         console.log("fold id : " + event.currentTarget.dataset.foldId);
  19.         //记录当前的目录id
  20.         //在点击目录下面的条目的时候,需要知道当前的条目属于哪个目录的
  21.         currentFoldId = event.currentTarget.dataset.foldId;
  22.     }
  23.   
  24. })


阅读(80) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册