微信小程序事件绑定

╰+攻爆jí腚メ 2021-07-24 20:20 658阅读 0赞

(1)绑定事件:
    	1、在wxml标签中如:bindtap='函数名'   函数名前不能有空格,不能直接写函数等表达式
    	2、其中bind为不会阻止事件冒泡,catch会阻止事件冒泡
    	
    	简写:如bind:tap/catch:tap
    	
    	
    	互斥事件绑定:
    		如:mut-bind:tap='事件'
    		一个mut-bind触发后,如果事件冒泡到其他节点上,其他节点上的mut-bind绑定函数不会被触发,换而言之,所有mut-bind是“互斥”的,只会有其中一个绑定函数被触发。
    			但bind绑定函数和catch绑定函数依旧会被触发。
    			
    		例如在下边这个例子中,点击inner view会先后调用handleTap3和handleTap2,点击middle view会调用handleTap2和handleTap1 。
    		<view id="outer" mut-bind:tap="handleTap1">
    		  outer view
    		  <view id="middle" bindtap="handleTap2">
    		    middle view
    		    <view id="inner" mut-bind:tap="handleTap3">
    		      inner view
    		    </view>
    		  </view>
    		</view>
    
    	事件捕获:
    		事件捕获会优先冒泡事件运行,即所有捕获事件运行完成后才会执行冒泡事件
    		capture-bind:tap	开启事件捕获
    		capture-catch:tap	开启事件捕获,但运行之后将中断捕获阶段和取消冒泡
    		
    		点击inner view:
    
    			<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
    			  outer view
    			  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    			    inner view
    			  </view>
    			</view>
    			会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
    			
    			<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
    			  outer view
    			  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    			    inner view
    			  </view>
    			</view>
    			如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。
    		
    (2)编写事件
    	事件对象e:
    		type:事件类型 	
    		timeStamp:事件生成时的时间戳 	
    		target:触发事件的组件的一些属性值集合 	
    		currentTarget:当前组件的一些属性值集合 	
    		mark:事件标记数据
    		dataset:标签的额外信息
    		mark:可以使用mark来识别具体触发事件的target节点或用于承载一些自定义数据,和dataset相似
    			当事件触发时,事件冒泡路径上所有的mark会被合并,并返回给事件回调函数(即使事件不是冒泡事件,也会 mark)		
    			<view mark:myMark="last" bindtap="bindViewTap">
    			  <button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button>
    			</view>
    			  	e.mark.myMark === "last"  =>true
    				e.mark.anotherMark === "leaf" =>true
    			其中:
    	    	1.mark和dataset很相似,主要区别在于:mark会包含从触发事件的节点到根节点上所有的mark:属性值,而dataset仅包含一个节点的data-属性值。
    		    2.如果存在同名的mark,父节点的mark会被子节点覆盖。
    		    3.在自定义组件中接收事件时,mark不包含自定义组件外的节点的mark。
    		    4.不同于dataset,节点的mark不会做连字符和大小写转换。
    
    
    			
    	CustomEvent自定义事件对象属性列表(继承基础事件e):
    		detail:额外的信息
    			自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。
    			点击事件的detail带有的x, y同pageX,pageY代表距离文档左上角的距离。
    			
    	TouchEvent触摸事件对象属性列表(继承基础事件e):
    		touches:当前停留在屏幕中的触摸点信息的数组
    		changedTouches:当前变化的触摸点信息的数组
    			changedTouches数据格式同touches,表示有变化的触摸点,如从无变有(touchstart),位置变(touchmove),从有变无(touchend、touchcancel)。
    			
    	特殊事件canvas中的触摸事件不可冒泡,所以没有currentTarget。
    
    	
    	方式一:在js中:
    		Page({
    			事件(e){
    				事件传递参数:和传统js不同,在标签中利用data-xxx 来定义参数
    				获取参数:event.currentTarget.dataset.xxx
    			}
    		})
    		
    	方式二:在wxs文件中:
    		一般用例设置组件的样式和class或动画,原因:
    		1.相比于传统的在js中绑定事件(即AppService逻辑层),因为wxs是运行在视图层(Webview)的,能够减少进程间的通信
    		2.以及setData渲染也会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟。
    
    		
    		(1)在wxs文件中,设置事件并导出
    			function tapName(event, ownerInstance) {
    			
    				event:在原有基础上添加了,instance属性
    					event.instance:触发事件的组件的ComponentDescriptor实例。
    					
    				ownerInstance:触发事件的组件所在的组件的ComponentDescriptor实例,如果触发事件的组件是在页面内的,ownerInstance表示的是页面实例。
    					selectComponent:选择器,返回组件的ComponentDescriptor实例。 	
    					
    					selectAllComponents:选择器数组,返回组件的ComponentDescriptor实例数组。 	
    					
    					setStyle: Object/string:设置组件样式,支持rpx
    						设置的样式优先级比组件wxml里面定义的样式高,不能设置最顶层页面的样式。 	
    						
    					addClass/removeClass/hasClass:设置的组件class 
    						优先级比组件wxml里面定义的class高,不能设置最顶层页面的 class。 	
    						
    					getDataset:返回当前组件/页面的dataset对象 	
    						.getDataset().data-之后的名字
    						
    					callMethod: 调用当前组件/页面在逻辑层(App Service)定义的函数。
    						.callMethod(函数名,参数)	只能传递一个参数
    					
    					requestAnimationFrame:requestAnimationFrame一样,用于设置动画。
    					 	
    					getState:返回一个object对象,当有局部变量需要存储起来后续使用的时候用这个方法。 	
    					
    					triggerEvent:(eventName,detail)和组件的triggerEvent一致。 	
    					
    					getComputedStyle:参数与SelectorQuery的computedStyle一致。 
    					
    					setTimeout用于创建定时器。wxs中无法使用setTimeout直接创建定时器
    					
    					clearTimeout:Number与原生clearTimeout一致。用于清除定时器。 
    					
    					getBoundingClientRect:返回值与SelectorQuery的boundingClientRect一致。 
    				
    				若只针对当前组件,则不需要使用ownerInstance,只需要event.instance即可,否则需要使用ownerInstance.selectComponent或selectAllComponents选择器进行选择
    				
    				
    			}
    		
    		(2)引入wxs标签
    			<wxs src="..." module="x"></wxs>
    			
    		(3)绑定事件
    			<view bindtap="{
       {x.事件名}">jackey</view>
    		
    		(4)wxs运行所在的视图层(Webview)和js逻辑层(App Service)通信:
    			视图层调用逻辑层:
    				利用.callMethod(函数名,参数)进行
    				
    			逻辑层调用视图层:
    				利用change:prop监听
    				(1)wxs中设置监听函数
    					module.exports = {
    					  propObserver: function(newValue, oldValue, ownerInstance, instance) {
    					    ...
    					  }
    					}
    				(2)设置监听属性,可以监听任意属性
    				    <wxs src="....wxs" module="x"></wxs>
    					<view  change:pop="{
       {x.propObserver}}" pop="gg">jaffica</view>
    					当属性第一次设置和改变时触发监听函数
    
    (3)支持的冒泡事件
    		
    	WXML的冒泡事件列表：
    	类型 	触发条件 	
    	touchstart 	手指触摸动作开始 	
    	touchmove 	手指触摸后移动 	
    	touchcancel 	手指触摸动作被打断，如来电提醒，弹窗 	
    	touchend 	手指触摸动作结束 	
    	tap 	手指触摸后马上离开 	
    	longpress 	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 	1.5.0
    	longtap 	手指触摸后，超过350ms再离开(推荐使用longpress事件代替,因为会继续触发tap事件) 	
    	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事件，(详见各个组件)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:  
wxml:

<view class="container">
    
      <wxs src="./test.wxs" module="f"></wxs>
      <view mut-bindtap="{ {f.tapName}}">jackey</view>
      <view  change:pop="{ {f.propObserver}}" class="jim t" data-fo="jeff" pop="gg">jaffica</view>
      
    </view>

wxs:

function tapName(event, ownerInstance) { 
      event.instance.setStyle({ 
        color:"red"
      })
      event.instance.setStyle("color:blue")
    
      var ins=ownerInstance.selectComponent('.jim')
      // ins.setStyle({ 
      // color:"green"
      // })
    
      console.log(ins.getDataset().fo)
      // event.instance.setTimeout(function(){ 
        
      // },2000);
      ins.callMethod('fun','geko')
      ins.addClass("medi");
    
    }
    
    
    
    module.exports = { 
      tapName: tapName,
      propObserver: function(newValue, oldValue, ownerInstance, instance) { 
        console.log('prop observer', newValue, oldValue)
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/dab5577f03564899966dc4b68f81da02.png