一、什么是事件？
事件是视图层到逻辑层的一种通讯方式
事件可以将用户的行为反馈到逻辑层
事件可以绑定在组件上，触发事件后，就会执行逻辑层中对应的事件函数
事件对象可以额外携带信息
定义：
事件是视图层到逻辑层的一种通讯方式，或者将用户的行为返回到逻辑层，当我们在组件绑定事件之后，当我们触发事件，就会执行逻辑层绑定的事件，处理回调函数，当页面的事件触发之后页面上元素一些额外事件，通过事件对象传递给我们的回调函数
二、小程序的事件模型
小程序的事件模型分三个部分：
1.事件捕获（自上而下）
2.事件处理阶段（执行）
3.事件冒泡阶段（由内到外）
三、小程序事件对象的属性分别是什么意思？
事件对象上，各个属性的一个含义：
type：触发事件的类型
timestamp：触发事件当时的时间戳
target：触发事件的根源组件，包括触发事件组件的id，类型，以及dataset自定义属性的集合
currentTarget：触发事件的当前组件，触发当前事件的id，类型，以及dataset自定义属性的集合
touches：表示我们停留在屏幕上触摸点的一个信息；
changedTouches：表示一个有变化的触摸点的信息；
detail：表示我们绑定事件所携带的数据，包括x/y到页面左上角的距离
四、小程序事件分类
捕获事件
touchstart touchmove touchCancel touchend tap longpress logtap
冒泡事件
touchstart touchmove touchCancel touchend tap longpress logtap transitionstart transitionend animationstart animationend
捕获事件和冒泡事件：
bind不会阻止事件冒泡；
capture-catch：可以绑定一个事件的捕获
catch：可以阻止事件冒泡或者事件捕获阶段
因为冒泡事件包含了捕获事件:
touchstart：手指按下屏幕的一个事件
touchmove：手机按下屏幕移动的一个事件
touchcancel：有来电提醒或者其他操作打断的一个事件
touchend：手指离开屏幕的一个事件
tap：手指点击屏幕，从手机点击到手指离开小于350ms的
longpress：手机点击屏幕，超过350ms的后的一个操作（推荐）不能执行tap操作
longtap：手机点击屏幕，超过350ms的后的一个操作，可以执行tap操作
transitionend：渐变动画结束后，执行的一个操作
animationstart：wxss动画开始的一个事件回调
animationiteration：wxss动画执行，迭代一次的之后的调用
animationend：wxss动画结束后的，事件回调
touchforcechange：有3d touch的ipone设备下的事件回调
五、多条数据，如何获取到，点击的是哪一条？
可以通过data-xx 属性 给事件处理函数传递额外的参数。
<!-- 可以通过data-xx 属性 给事件处理函数传递额外的参数 -->
<!-- 有好多条数据，希望点击时，能够获取到点击的是哪一个？ -->
<!-- 给按钮添加属性形式，data-id="1" -->
<view>
<text>aaa</text>
<button bindtap="remove" data-id="1">remove</button>
</view>
<view>
<text>bbb</text>
<button bindtap="remove" data-id="2">remove</button>
</view>
<view>
<text>ccc</text>
<button bindtap="remove" data-id="3">remove</button>
</view>
<view>
<text>ddd</text>
<button bindtap="remove" data-id="4">remove</button>
</view>
<view>
<text>item</text>
<button bindtap="remove" data-id="5">remove</button>
//逻辑层
Page({
remove(e){
console.log(e)
}
})
输出的事件对象中包含一个target
target里面含有一个dataset即可看出点击的是第几条数据
如果感觉有帮助，请留下一个宝贵的赞，或者给小编一个赞赏！！！
网友评论