zoukankan      html  css  js  c++  java
  • 小程序基础(二)

    小程序中e.target和e.currentTarget的区别

    事件捕获与事件冒泡

    事件捕获是从外到内,事件冒泡是从内到外。

    注意:不管是不是冒泡事件,都不会改变事件传递的参数值,都还是在dataset中获取(****)

    target:指事件源组件对象 currentTarget:当前组件对象

    分两种情况是属于冒泡事件还是非冒泡事件

    第一种情况:属于冒泡行为bind

    wxml页面代码:

    <view id="outter" bind:tap="tap1">
       outer view
       <view id="middle" bind:tap="tap2">
         middle view
         <view id="inner" bind:tap="tap3">
           inner view
          </view>
       </view>
    </view>
    

    js代码:

     tap1: function (e) {
        console.log(1, e)
      },
      tap2: function (e) {
        console.log(2, e)
      },
      tap3: function (e) {
        console.log(3, e)
      }
    

    运行结果:

    img

    点击子元素inner,但由于是冒泡行为父类元素middle和outter都触发,从结果可以看出:

    父类middle和outter,target的id都是等于inner(子元素的id);

    middle的currentTarget的id是middle,outter的currentTarget的id是outter;

    第二种情况:非冒泡行为 catch

    wxml代码: (和第一种不一样的点在于都改成catch:tap)

    <view id="outter" catch:tap="tap1">
       outer view
       <view id="middle" catch:tap="tap2">
         middle view
         <view id="inner" catch:tap="tap3">
           inner view
          </view>
       </view>
    </view>
    

    js代码:

     tap1: function (e) {
        console.log(1, e)
      },
      tap2: function (e) {
        console.log(2, e)
      },
      tap3: function (e) {
        console.log(3, e)
      }
    

    结果:

    img

    因为在middle和inner都设置了非冒泡行为,所以都只是运行到自己的不会往上走,这个结果是分别点击了middle和inner,以上这些可以得出:

    当事件没有冒泡行为时,target和currentTarget都指向事件触发的对象本身。

    需要注意的:还有一种情况是如果inner是冒泡,middle是非冒泡,点击inner的结果

    img

    结果还是和第一种一样

    总结:

    1.当全是冒泡行为时:

    target:事件源组件对象(事件的冒泡源头)

    currentTarget:当前组件对象(就是当前所处的对象)

    2.当没有冒泡行为时:

    target和cueerntTarget是一样的,就是当前所处的对象

  • 相关阅读:
    各种有趣vbs,bat脚本
    weblogic ssrf 漏洞笔记
    jboss反序列化漏洞实战渗透笔记
    脏牛提权
    Bugku-cms1
    通过Tomcat Manager拿shell
    【转】网站渗透入侵常见谷歌黑客语法总结
    【转】AWVS扫描小技巧
    学习笔记
    三栏布局那些事儿
  • 原文地址:https://www.cnblogs.com/chmily/p/12055147.html
Copyright © 2011-2022 走看看