微信小程序事件

原创 2018年04月15日 15:18:50

什么是事件

事件

  • 一种用户行为
    当用户长按图片、拖动等
  • 一种通讯方式
    当用户进行触摸屏幕、点击按钮,事件发生在UI层,UI层将信息发送给逻辑代码

事件的类别

  • 点击事件 tap
  • 长按事件 longtap
  • 触摸事件 touchstart touchend touchmove touchcancel

touchend:手指触摸到手指离开,是正常的触摸结束
touchcancel:突然来了电话,页面被覆盖,等同于触摸事件被打断

  • 其他 submit input

事件冒泡

<!--index.wxml-->
<!--index.wxml-->
<view class="view1" bindtap='view1Click'>
    view 1
    <view class="view2" bindtap='view2Click'>
         view 2
         <view class="view3" bindtap='view3Click'>
            view 3
         </view>
    </view>
</view>
/**index.wxss**/
.view1 {
  height: 500rpx;
  width: 100%;
  background-color: khaki;
}
.view2 {
  height: 400rpx;
  width: 80%;
  background-color: rosybrown;
}
.view3 {
  height: 300rpx;
  width: 60%;
  background-color: firebrick;
}
//事件处理函数
  view1Click:function() {
    console.log("view1Click")
  },
  view2Click: function () {
    console.log("view2Click")
  },
  view3Click: function () {
    console.log("view3Click")
  },

点击view3 ,控制台的输出如下:

这种现象就叫冒泡事件,当我们点击一个子view的时候,它也会触发父view及父view的父view的被点击,所以控制台会连续提示三次点击事件。
点击,长按,触摸属于冒泡事件,其余的事件为非冒泡事件。

事件绑定

  • bind绑定
  • catch绑定

上面我们的代码是用bindtap进行绑定的,如果换成catchtap进行事件绑定

<!--index.wxml-->
<view class="view1" bindtap='view1Click'>
    view 1
    <view class="view2" bindtap='view2Click'>
         view 2
         <view class="view3" catchtap='view3Click'>
            view 3
         </view>
    </view>
</view>

点击view3,只显示了view3被点击。

点击view2,显示view2view1都被点击了。

这就是catchbind的区别。

事件对象详解

我们触发一个事件时,可以把该事件传递给相应的事件处理函数,下面我们将事件对象打印出来。

//事件处理函数
  view1Click:function(event) {
    console.log("view1Click")
    console.log(event)
  },
  view2Click: function (event) {
    console.log("view2Click")
    console.log(event)
  },
  view3Click: function (event) {
    console.log("view3Click")
    console.log(event)
  },

点击view3。
这里写图片描述
展开其中一个事件。
这里写图片描述

currentTargettarget

currentTarget是被点击的view, target是目标的view,下面给各view设置id就可以说明清楚了。

<!--index.wxml-->
<view class="view1" id="view1" bindtap='view1Click'>
    view 1
    <view class="view2" id="view2" bindtap='view2Click'>
         view 2
         <view class="view3" id="view3" bindtap='view3Click'>
            view 3
         </view>
    </view>
</view>

现在再点击view3,view3、view2和view1被点击打印出的事件分别如下。
这里写图片描述
这里写图片描述
这里写图片描述
可以看出target是触发事件源的组件,currentTarget是事件绑定的组件。

dataset

目前我们的dataset内容都为空,这个数据从哪里来,又有什么用呢。
这里写图片描述
dataset是为了方便我们给view添加上我们自己制定的属性和数据。

<view class="view1" id="view1" bindtap='view1Click' data-title="新闻标题" data-id="100">
    view 1
    <view class="view2" id="view2" bindtap='view2Click'>
         view 2
         <view class="view3" id="view3" bindtap='view3Click'>
            view 3
         </view>
    </view>
</view>

这里写图片描述

[Wondgirl] 微信小程序(四)事件

官方解释什么是事件事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信...
  • wondgirl
  • wondgirl
  • 2016-11-25 12:00:06
  • 1296

微信小程序开发详解(五)---微信小程序事件

1:事件冒泡 在微信小程序开发工具中,新建event文件夹,新建文件,在event.wxml中填写如下代码:   这里是view 1              这里是view 2         ...
  • aoaoxiexie
  • aoaoxiexie
  • 2016-12-27 10:33:16
  • 4183

微信小程序学习(5)_事件

一、什么是事件? 1.一种用户的行为 用户长按某一张图片,点击某个按钮,这就是用户的行为,也是事件 2.一种通讯方式 为什么说事件也是一种通讯方式呢?因为用户点击按钮的时候,这是发生在UI层的...
  • Two_Water
  • Two_Water
  • 2016-10-17 01:46:20
  • 5931

微信小程序中的input组件

微信小程序中input组件效果和我们网页中的input类似。 这里只说一下事件,其他属性详细我们查看微信小程序官方文档 bindfocus: 指当我们的输入框获得焦点时触发,也就是鼠标或者手指点击...
  • HaiJing1995
  • HaiJing1995
  • 2017-04-11 10:26:45
  • 4901

微信小程序:冒泡事件及其阻止

事件的类别分为几种:        点击事件:tap        长按事件:longtap        触摸事件:touchstart; touchend;touchcancel;touchmov...
  • qq_36002582
  • qq_36002582
  • 2017-12-08 21:07:34
  • 1311

【微信小程序】事件交互案例演示

主要用到index.wxml,index.js.index.wxss   {{clickMsg}}    点击view0     点击view1 //index.js代码演示 var ...
  • xiongyongting
  • xiongyongting
  • 2017-01-12 22:28:58
  • 1199

微信小程序-事件

微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。 接下来把文档copy过来,原文地址:https://mp.w...
  • gang544043963
  • gang544043963
  • 2016-10-12 11:08:43
  • 25334

微信小程序 上拉,下拉事件

之前用的是scrollview的bindscrolltoupper以及bindscrolltolower,可以我怎么拉都不走,还请成功的大神来帮我解释下。 既然这个不同我就找了另一种方法,就是官方提...
  • u010095372
  • u010095372
  • 2017-02-28 13:04:28
  • 2786

微信小程序Demo:事项助手(在日历上添加事件备注)

  • 2017年08月16日 16:31
  • 36KB
  • 下载
收藏助手
不良信息举报
您举报文章:微信小程序事件
举报原因:
原因补充:

(最多只允许输入30个字)