事件

<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 将中断捕获阶段和取消冒泡阶段。

 

posted @ 2020-03-25 13:27  shanlu  阅读(105)  评论(0编辑  收藏  举报