<view id="tapTest" data-hi="WeChat" bindtap="tapName">bindtap</view>
Page({ tapName:function(event){ console.log(event); }, })
以 bindtap 事件为例,事件是通过 bindtap 这个属性绑定在组件上的,同时在当前页面的Page构造器转给你定义对应的事件处理函数 tapName,当用户点击该 view 区域时,达到触发条件生成事件 tap ,该事件处理函数 tapName 会被执行,同时还有收到 一个事件对象event
函数参数传递 ( dataset ) :
//index.wxml <button data-title="hello" bindtap="handletap">点击</button> //index.js Page({ handletap(event){ console.log(event.target.dataset.title); //hello }, })
注意 target 和 current Target 区别
currentTarget 为当前事件所绑定的组价,target 是触发该事件的源头组件:
<view id="outer" catchtap="handleTap"> <view id="inner">点击</view> </view>
Page({ handleTap:function(event){ console.log(event); }, })
事件的冒泡和捕获
bind 和 capture-bind 的含义分别代表事件的冒泡阶段和捕获阶段
<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>
点击 inner view 会先后调用 handleTap2 , handleTap4 , handleTap3 , handleTap1
点击 outer view 会先后调用 handleTap2 handleTap1
bind事件绑定不会阻止冒泡事件向上冒泡,catch 事件绑定会阻止冒泡事件向上冒泡。
此时只触发 handleTap2 , capture-catch 将中断捕获阶段和取消冒泡阶段。