关于js中event的target和currentTarget的区别

  今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需:

target与currentTarget的区别?

通俗易懂的说法: 
比如说现在有A和B, 
A.addChild(B) 
A监听鼠标点击事件 
那么当点击B时,target是B,currentTarget是A 
也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者

总结: 
target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。

时间: 2024-12-28 20:47:19

关于js中event的target和currentTarget的区别的相关文章

在javascript中event的target和currentTarget的区别

JavaScript的event对象中 event.target指代的是:触发事件的元素 event.currentTarget指代的是:事件绑定的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div

js中的target与currentTarget的区别&lt;转&gt;

关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶段.只有当他们同事处于目标阶段的时候他们的指向才是一样的,请看以下代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>js性能优化</title

target与currentTarget的区别(jqueryui方式获取z-Index)

作者:zccst 原文 :http://zccst.iteye.com/blog/2081412 2014-6-25 今天看了jQuery手册,发现jQuery的事件对象模块也有一个currentTarget,始终指向this. 所以结论是:原生的currentTarget与jQuery的currentTarget完全不是一回事.要重点区别对待. 2014-6-17 target与currentTarget的区别? 通俗易懂的说法: 比如说现在有A和B, A.addChild(B) A监听鼠标点

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

https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别. 首先上代码: wxml部分: ? 1 2 3 4 <view id='tar-father' bindtap='click'>   父组件   <view id='tar-children'>子组件</view>  </view> wxss

事件冒泡和事件捕获以及解释target和currenttarget的区别

冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #son{ width: 200px

关于js中for in和foreach in的区别

js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach in是作为E4X标准的一部分在javascript 1.6中发布的,而且E4X不是ECMAScript标准的一部分. foreach…in语句已被废弃,E4X中的大部分特性已被删除,但考虑到向后兼容,foreach…in只会被禁用而不会被删除,可以使用ES6中新的for…of语句来代替. var 小青

JS中apply()与call()的含义与区别

JavaScript中,apply()与call()的含义一样,均为改变调用函数中的this指向.其中apply()与call()的第一个参数表示所要指向的对象,若调用函数无参数可不写,则默认为window.第一个参数后的参数表示调用函数的参数,其中apply()第一个参数后面的参数为一个数组,call()第一个参数后面为0或多个参数. 例: 1 window.x = 100; 2 3 4 var obj = {}; 5 obj.x = 1; 6 obj.test = function(a) {

JavaScript中event的x,clientX,offsetX的区别

JavaScript中event的x,clientX,offsetX的区别 请看下面的文字说明,也就是event中x,clientX,offsetX,screenX的区别: x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置.www.mlybyby.com clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域. offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置. screenX:相对于用户屏幕. 同时你可以对比下面代码分析 Cl

js中对象的浅拷贝和深拷贝的区别

js中对象的浅拷贝和深拷贝的区别 浅度拷贝:复制一层对象的属性,并不包括对象里面的为引用类型的数据,当改变拷贝的对象里面的引用类型时,源对象也会改变. 深度拷贝:重新开辟一个内存空间,需要递归拷贝对象里的引用,直到子属性都为基本类型.两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性. 数据的类型: 一般数据(值传递):字符,数值,布尔,undefined 拷贝(复制)时,传递的是值,修改新数据,不会影响老数据 复杂数据(引用传递):对象 拷贝(复制)时,传递的是内存地址的