美文网首页
微信小程序事件绑定

微信小程序事件绑定

作者: 椰果粒 | 来源:发表于2019-10-04 16:41 被阅读0次

事件绑定

简单的点击事件:

<view>{{counter}}</view>
<button size="mini" bindtap="handleIncrease">+</button>
<button size="mini" bindtap="handleDecrease">-</button>

handleIncrease(){
  this.setData({
    counter: this.data.counter + 1
  })
},
handleDecrease(){
  this.setData({
    counter: this.data.counter - 1
  })
}

有的组件有自己特有的事件,比如input或者scroll-view
input有bindinput,bindfocus,bindblur
scroll-view有bindscrolltpwrapper,bindscrolltolower

所有组件都有的事件:

事件 触发条件
touchstart 手指触摸动作开始
touchmove 手指滑动
touchcancel 手指触摸被打断(比如来电了)
touchend 手指触摸结束
tap 点击事件
longpress 长按,超过350毫秒,并且这个和tap不能同时触发,只会执行一个

点击一下,会触发touchstart,tap,touchend
长按会触发:touchstart,longpress,touchend
这俩是不能同时触发到的。

bindtap与catchtap都表示点击,他俩的区别是:

  • bindtap是冒泡的,catchtap是非冒泡的。

举个例子:

<view 
    class="container"
    bind:touchstart="handleTouchStart"
    bind:touchmove="hendleTouchMove"
    bind:touchcancel="handleTouchCancel"
    bind:touchend="handleTouchEnd"
    bind:tap="handleTap"
    bind:longpress="handleLongpress"
></view>
handleTouchStart(){
  console.log("touchStart");
},
handleTouchMove(){
  console.log("touchMove");
},
handleTouchCancel(){
  console.log("touchCancel");
},
handleTouchEnd(){
  console.log("touchEnd");
},
handleTap(){
  console.log("tap");
},
handleLongpress(){
  console.log("longpress");
},

事件对象

当某个组件触发了一个事件的时候,就会产生一个事件对象(event),这个事件对象有很多属性。这个事件对象会被传入到回调函数中。

事件对象的属性 属性值 描述
type tap/touchstart...
currentTarget
target
detail x,y 鼠标点击的位置
timestapes 从页面打开到我触发事件经过了多长时间
changedTouches
touches

touches和changedTouches的区别:
touches:记录了有几个手指在屏幕上触摸了
changedTouches:记录手指的变化,有几个手指发生了变化。

在什么时候能看到他们的区别:

  • touchend的时候,touches里边为0,没有手指触摸了。changedTouches不为0,因为有手指改变了
  • 多个手指触摸时,不同。

target和currentTarget的区别:

  • target:指向的是触发事件的元素
  • currentTarget:指向的是捕获事件的元素(也就是元素自身)

举个例子:
获取事件对象:

<button bind:tap="handleClick">点击获取事件对象</button>
handleClick(event){
  console.log(event);
},

事件的传递参数

比如我想给点击事件传递一个参数,应该怎么做:

通过data-的形式传递参数

<!-- 事件传递参数,传递index和item -->
<block wx:for="{{titles}}" wx:key="{{index}}">
  <view 
    bind:tap="handleClickTitle"
    data-index="{{index}}"
    data-item="{{item}}"
  >{{item}}</view>
</block>
// 获取传递过来的参数
handleClickTitle(event){
  console.log(event)
  const dataset = event.currentTarget.dataset;
  const index = dataset.index;
  const item = dataset.item;
  console.log(index, item);
}

事件捕获和事件冒泡

当组件产生一个事件的时候,事件分了事件捕获和事件冒泡。这和原生的是一样的。

顺序是:先捕获后冒泡,先从外往里再往外。

会一层层传递:bind
捕获:capture-bind:tap
冒泡:bind:tap

不会一层层传递,阻止事件的进一步传递:catch
就是阻止冒泡和阻止捕获(后续都被阻止掉了)
捕获:capture-catch:tap
冒泡:catch:tap

相关文章

  • 微信小程序 --- 事件绑定

    1.事件类别: tap:点击事件; longtap:长按事件; touchstart:触摸开始; touchend...

  • 微信小程序事件绑定

    一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: 上述代码就四行,首先是一个 ...

  • 微信小程序事件绑定

    事件绑定 简单的点击事件: 有的组件有自己特有的事件,比如input或者scroll-viewinput有bind...

  • 微信小程序综合

    WXSSWXML导入的两种方式 数据绑定列表渲染事件绑定 小程序的部分内置组件和接口(更新) 小程序的配置文件微信...

  • 微信小程序(文档)-事件

    微信小程序官方文档 一 什么是事件 二 事件的使用方式 三 事件详解 1 事件分类 2 事件绑定 3 事件对...

  • 微信小程序绑定事件解析

    小程序点击事件有两种bindtap和catchtap,前者不会阻止冒泡事件向上冒泡,后者则可以阻止向上冒泡。 1....

  • 微信小程序组件探究和应用

    把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:sc...

  • 2021-06-08

    今日收获微信小程序双向绑定hidden = "{{offerId==''}}"

  • 小程序绑定微信开放平台帐号

    小程序绑定微信开放平台帐号 小程序绑定微信开放平台帐号后,可与帐号下的其他移动应用、网站应用及公众号打通,通过Un...

  • 微信小程序 - 13.事件绑定

    输入框内容实时映射到下边的标签中显示 放两个按钮 + 和 -点击 + 输入框输入的数字+1点击 - 输入框输入的数...

网友评论

      本文标题:微信小程序事件绑定

      本文链接:https://www.haomeiwen.com/subject/uurspctx.html