小程序04-事件绑定

Posted 2020-12-13 跳跃的皮皮虾

事件分类

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

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 设备，重按时会触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件

 

普通事件绑定

事件绑定的写法类似于组件的属性，可以使用bind进行绑定，如：

<view bindtap="handleTap"> Click here! </view>

 

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

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

 

.wxml文件

 1 <view>利用bindinput和this.setData实现双向绑定</view>
 2 <input type="digit" placeholder="请输入数字" bindinput="handleInput" value="{{num}}"/>
 3 
 4 <view>model:value双向绑定语法</view>
 5 <!-- 设置type="digit",只会弹出有小数点的键盘 -->
 6 <input type="digit" placeholder="请输入数字" model:value="{{num}}"/>
 7 
 8 <button bindtap="handleTap" data-opnum="{{1}}">+</button>
 9 <button bindtap="handleTap" data-opnum="{{-1}}">-</button>
10 <view>
11   结果：{{num}}
12 </view>

 

.js文件

Page({
  data: {
    num:0
  },

  // 输入框input事件的执行逻辑
  handleInput: function(e){
    this.setData({
      num:e.detail.value
    })
  },
  // 加减按钮点击事件
  handleTap(e){
    // 1.获取自定义属性opnum
    const opnum = e.currentTarget.dataset.opnum;
    this.setData({
      num: Number(this.data.num) + Number(opnum)
    })
  },
})