事件捕获与事件冒泡

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

注意:不管是不是冒泡事件,都不会改变事件传递的参数值,都还是在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)
}

运行结果:

点击子元素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)
}

结果:

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

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

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

结果还是和第一种一样

总结:

 1.当全是冒泡行为时:

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

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

2.当没有冒泡行为时:

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

小程序--e.target和e.currentTarget区别的更多相关文章

  1. 微信小程序——e.target与e.currentTarget的区别

    在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上 ...

  2. 彻底弄懂小程序e.target与e.currentTarget

    一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...

  3. 【小程序】获取到的e.target与e.currentTarget区别

    [小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...

  4. 微信小程序的target和currentTarget的区别

    https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下 ...

  5. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  6. 微信小程序 事件绑定 bind和catch 区别

    转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...

  7. 微信小程序组件——bindtap和catchtap的区别

    了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...

  8. vue中的绑定class和微信小程序中的绑定class的区别

    微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...

  9. event.target和event.currentTarget区别

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

随机推荐

  1. 元素在当前窗口可视的区域---Element.scrollIntoView()

    element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...

  2. centos 普通用户 和 root 相互切换方法

    root 用户切换为普通用户 :用 login -f username (加 -f 不用输入密码)例如普通用户的用户名为hadoop,这里就是 login -f hadoop 普通用户切换为root用 ...

  3. 封装qt http文件下载类

    #include <QApplication> #include <QtWidgets> #include <QtNetwork> //downloads one ...

  4. 小D课堂 - 零基础入门SpringBoot2.X到实战_第5节 SpringBoot部署war项目到tomcat9和启动原理讲解_22、SpringBoot启动方式和部署war项目到tomcat9

    笔记 1.SpringBoot启动方式讲解和部署war项目到tomcat9 简介:SpringBoot常见启动方式讲解和部署war项目Tomcat 1.ide启动     2.jar包方式启动    ...

  5. PHP中Cookie与 Session

    在非常多时候,我们需要跟踪浏览者在整个网站的活动,对他们身份进行自动或半自动的识别(也就是平时常说的网站登陆之类的功能),这时候,我们常采用  Cookie与 Session 来跟踪和判断. Sess ...

  6. ToggleButton 和 Switch

           界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  7. iptables 配置场景3

    iptables -I INPUT -i lo -j ACCEPT    #允许本地回环地址访问: iptables -I INPUT -m state --state ESTABLISHED,REL ...

  8. fkutter Stepper步骤指示器

    一个Material Design 步骤指示器,显示一系列步骤的过程 import 'package:flutter/material.dart'; class StepperDemo extends ...

  9. 超级简单的checkbox赋值,用于记住登陆名

    <input name="rememberme" type="checkbox" id="rememberme" onclick=&q ...

  10. Windows Vistual Studio 2013/2015 MRPT安装

    博客参考:https://blog.csdn.net/qyjzhou/article/details/80110941 MRPT 安装 1. 官网编译好的程序直接安装 https://sourcefo ...