微信小程序开发项目实战（微课版）课件 2-5 课件-事件绑定.pptx

项目二小程序编程基础任务五事件渲染MiniProgram

事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。小程序中绑定事件，通过bind关键字来实现。如bindinput，bindtap(绑定点击事件)，bindchange等。Next》事件绑定简介

通过bind+“事件名称”为组件绑定事件，如bindchange、bindtap等，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。在大多数组件和自定义组件中，?bind?后也可以紧跟一个冒号，其含义不变，如?bind:tap。Next》事件的使用方式

（1）不带参数的事件绑定在wxml中定义组件。Next》事件的使用方式在JS页面定义事件处理函数。Page({data:{num:0},changeinput:function(e){console.log(this.setData({num:e.detail.value}));}})inputtype=textbindchange=changeinput/

（2）带参数的事件绑定在wxml中定义组件。Next》事件的使用方式在JS页面定义事件处理函数。Page({??data:?{????},??tapEvent:function(e){????console.log(e)??//获取事件详情????console.log(e.currentTarget.dataset.hi)//获取数据绑定data-的数据????console.log(e.currentTarget.dataset.id)??}})view?data-hi=WeChat?data-id=01?bindtap=tapEvent?Click?me/view

事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。Next》事件分类运行环境渲染层touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）transitionend会在WXSStransition或wx.createAnimation动画结束后触发animationstart会在一个WXSSanimation动画开始时触发animationiteration会在一个WXSSanimation一次迭代结束时触发animationend会在一个WXSSanimation动画完成时触发touchforcechange在支持3DTouch的iPhone设备，重按时会触发WXML的冒泡事件列表：

触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。Next》事件的捕获阶段(1)捕获事件capture-bind开头，点击哪个事件，就触发哪个和自己包裹的所有事件。view?class=outer?capture-bind:tap=handleTap1???outer?view???view?class=middle?capture-bind:tap=handleTap2???????middle?view???????view?class=inner?capture-bind:tap=handleTap3????????????inner?view???????/view??/view/view

触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。Next》事件的捕获阶段（2）取消冒泡、捕获事件capture-catch开头，不管怎么点击，都只触发最外层事件。view?class=outer?capture-catch:tap=ha