zoukankan      html  css  js  c++  java
  • 事件

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

  • 相关阅读:
    msp430入门学习21--TA
    msp430入门学习20
    msp430入门学习17
    msp430入门学习16
    msp430入门学习15--时钟
    msp430入门学习14
    msp430入门学习13
    msp430入门学习12
    msp430入门学习11
    msp430入门学习10
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12565669.html
Copyright © 2011-2022 走看看