甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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

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

    事件处理

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

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

    事件示例

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

    模板：

    • SWAN
     
 
 
      
  
  
  
    1.  点击 
      2.

    定义事件的处理函数：

    • JS
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  tapHandle(e) {
      3.   
  
  
    3.  swan.showToast(e.currentTarget.dataset.say);
      4.   
  
  
    4.  }
      5.   
  
  
    5. });
      6.

    效果：
    当用户单击组件时，显示：”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
     
 
 
      
  
  
  
      2.   
  
  
    2.  wrap
      3.   
  
  
    3.  
      4.   
  
  
    4.  module
      5.   
  
  
    5.  
      6.   
  
  
    6.  text
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
      10.

    效果：

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

    事件的捕获

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

    代码示例：capture-bind

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  wrap
      3.   
  
  
    3.  
      4.   
  
  
    4.  text
      5.   
  
  
    5.  
      6.   
  
  
      7.

    效果：

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

    代码示例：capture-catch

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  wrap
      3.   
  
  
    3.  
      4.   
  
  
    4.  text
      5.   
  
  
    5.  
      6.   
  
  
      7.

    效果：

    用户单击 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
     
 
 
      
  
  
  
      2.   
  
  
    2.  点击我
      3.   
  
  
      4.  
 
 
     
 
 
      
  
  
  
      2.   
  
  
    2. Page({
      3.   
  
  
    3.  handleTap: function(e) {
      4.   
  
  
    4.  console.log(e);
      5.   
  
  
    5.  // e.type == “tap”
      6.   
  
  
    6.  // e.timeStamp == 1542
      7.   
  
  
    7.  // e.detail == {x: 270, y: 63}
      8.   
  
  
    8.  // e.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
      9.   
  
  
    9.  // e.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
      10.   
  
  
    10.  // 当点击inner节点时
      11.   
  
  
    11.  // e.target 是inner view组件
      12.   
  
  
    12.  // e.currentTarget 是绑定了handleTap的outer view组件
      13.   
  
  
    13.  }
      14.   
  
  
    14. })
      15.

    下面是事件对象的属性为属性值集合时的详细信息。这里需要注意的是 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 原生事件，这会导致小程序的事件绑定不生效。


    网站题目：创新互联百度小程序教程：事件处理
    网页网址：https://chengdu.cdxwcx.cn/article/dhojpcp.html

    其他资讯