创新互联百度小程序教程：事件处理

事件处理
- 事件示例
- 事件的分类
- 事件绑定和冒泡
- 事件的捕获
- 事件对象
- 代码示例
  - target
  - currentTarget
  - detail
  - dataset
  - touch
  - changedTouch
- Tips

事件处理

事件提供了一种可以将用户的行为从视图层反馈到逻辑层进行处理的通讯方式。触发绑定在组件上的事件的时候，就会执行逻辑层中对应的事件处理函数，同时也可以传递数据，例如 id、dataset 等。

10余年的巨鹿网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整巨鹿建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“巨鹿网站设计”,“巨鹿网站推广”以来，每个客户项目都认真落实执行。

事件示例

目标：
在组件中绑定一个事件处理函数 bindtap 。

模板：

SWAN

定义事件的处理函数：

 
 
 
  
  
  Page({  
  
   tapHandle(e) {  
  
   swan.showToast(e.currentTarget.dataset.say);  
  
   }  
  
  });

效果：
当用户单击组件时，显示：”hello”。

事件的分类

与浏览器的 DOM 事件类似，智能小程序的视图中事件分为冒泡事件和非冒泡事件。

冒泡事件指的是当组件上的事件被触发后，该事件会向父节点传递；
非冒泡事件指的是当组件上的事件被触发后，该事件不会向父节点传递；
原生组件video、live-player、canvas、cover-view、cover-image等从基础库1.12.0开始支持冒泡。

冒泡事件如下表，不在列表的事件均为非冒泡事件。

事件类型	触发时机
tap	触摸后马上离开
longtap	触摸后超过 350ms 再离开（推荐使用 longpress 事件代替）
longpress	触摸后超过 350ms 再离开，如果是指定了事件回调函数并触发了这个事件，tap 事件将不被触发
touchstart	触摸开始时
touchmove	触摸后移动时
touchcancel	触摸后被打断时，如来电等
touchend	触摸结束时
touchforcechange	支持 3D Touch 的 iPhone 设备，重按时会触发
transitionend	会在 transition 或 swan.createAnimation 动画结束后触发
animationstart	会在 animation 动画开始时触发
animationiteration	会在 animation 一次迭代结束时触发
animationend	会在 animation 动画完成时触发

事件绑定和冒泡

事件绑定在组件上，与属性的写法相同（以 key、value 的形式）。

key 以 bind 或 catch 开头，衔接事件类型，例如 bindtap、catchtouchcancel 。也可以在 bind 和 catch 后可以紧跟一个冒号，如bind:tap、catch:touchstart，其功能不变。
bind 与 catch 的区别是 bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡；
value 对应的是在 Page 中定义同名的函数，否则在事件触发时执行函数会抛出异常。

代码示例

SWAN

效果：

① 用户单击 text 会先后调用 handleTap3 和 handleTap2。这是因为 tap 事件冒泡到了 module，而 module 阻止了 tap 事件冒泡，不再向父节点传递
② 用户单击 module 会触发 handleTap2
③ 用户单击 wrap 会触发 handleTap1

事件的捕获

捕获阶段是位于冒泡阶段之前，在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。
在捕获阶段监听的方式是采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

代码示例：capture-bind

SWAN

效果：

用户单击 text 会先后调用 handleTap2、handleTap4、handleTap3、handleTap1

代码示例：capture-catch

SWAN

效果：

用户单击 text 只会调用 handleTap2

事件对象

默认当组件触发事件时，逻辑层绑定事件的处理函数会收到一个默认参数，即事件对象。

下面是事件对象详细属性列表：

属性	类型	说明
type	String	事件的类型
timeStamp	Int	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的属性值集合，详细属性参见 target
currentTarget	Object	当前组件的一些属性值集合，详细属性参见 currentTarget
detail	Object	自定义事件对象属性列表，详细属性参见 detail
touches	Array	触摸事件类型存在，存放当前停留在屏幕中的触摸点信息的数组，touch 详细属性参见 touch
changedTouches	Array	触摸事件类型存在，存放当前变化的触摸点信息的数组, changedTouch changedTouch

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

 
 
 
  
  
    
  
  Page({  
  
   handleTap: function(e) {  
  
   console.log(e);  
  
   // e.type == “tap”  
  
   // e.timeStamp == 1542  
  
   // e.detail == {x: 270, y: 63}  
  
   // e.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]  
  
   // e.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]  
  
   // 当点击inner节点时  
  
   // e.target 是inner view组件  
  
   // e.currentTarget 是绑定了handleTap的outer view组件  
  
   }  
  
  })

下面是事件对象的属性为属性值集合时的详细信息。这里需要注意的是 target 和 currentTarget 的区别,currentTarget 为当前事件所绑定的组件，而 target 则是触发该事件的源头组件。

target

属性	类型	说明
dataset	Object	触发事件组件上由 data-开头的自定义属性组成的集合,详细属性参见 dataset
id	String	触发事件组件的 id
offsetTop	Int	元素向上偏移的像素值
offsetLeft	Int	元素向左偏移的像素值

currentTarget

属性	类型	说明
dataset	Object	事件绑定的组件上由 data-开头的自定义属性组成的集合,详细属性参见 dataset
id	String	事件绑定的组件的 id
offsetTop	Int	元素向上偏移的像素值
offsetLeft	Int	元素向左偏移的像素值

detail

是自定义事件所携带的数据，具体详见组件定义中各个事件的定义。

dataset

在组件的事件被触发时，也可以传递自定义的数据。
书写方式：以 data- 开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)，最终的 - 在 dataset 中会将连字符转成驼峰式写法。
如组件上data-car-color属性值的读取方式是: event.currentTarget.dataset.carColor。

touch

属性	类型	说明
identifier	Number	触摸点的标识符
clientX, clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角的 X 轴与 Y 轴的距离
pageX, pageY	Number	距离文档左上角的 X 轴与 Y 轴的距离

changedTouch

数据格式同 touches，指的是有变化的触摸点，如 touchstart（开始），touchmove（变化），touchend，touchcancel（结束）等。

点击事件的 detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

Tips

请不要在组件中绑定 onClick、onAnimationstart、onDrag 等 HTML 原生事件，这会导致小程序的事件绑定不生效。

网站名称：创新互联百度小程序教程：事件处理
文章路径：http://cdbrznjsb.com/article/dhojpcp.html

建站动态