先上结论：

　　Event.target：触发事件的元素；

　　Event.currentTarget：事件绑定的元素；

　　

　　通过下面的例子来理解这两个属性的区别：

　　使用Event.target属性的例子：（我在<body>和<button>上都绑定了click事件）

 <body onclick="mouseEvent1()">

     <button onclick="mouseEvent2()">点我</button>

     <script type="text/JavaScript">

         function mouseEvent1() {

             console.log("body触发的");

             console.log(event.target);

         }

         function mouseEvent2() {

             console.log("button触发的");

             console.log(event.target);

         }

     </script>

 </body>

　　因为<button>在<body>中，所以点击<button>的同时也相当于点击了<body>（个人理解），触发<button>点击事件的同时也触发了<body>的点击事件。

　　运行效果如下：

　　

　　我们点击<button>，返回的元素都是<button>元素。

　　接下来我们把所有target换成currentTarget：

 <body onclick="mouseEvent1()">

     <button onclick="mouseEvent2()">点我</button>

     <script type="text/JavaScript">

         function mouseEvent1() {

             console.log("body触发的");

             console.log(event.currentTarget);

         }

         function mouseEvent2() {

             console.log("button触发的");

             console.log(event.currentTarget);

         }

     </script>

 </body>

　　运行效果如下：

　　

　　点击<button>，返回了<button>元素和<body>元素。

Event对象中的target属性和currentTarget属性的区别的更多相关文章

  1. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...

  2. [1]区分event对象中的[clientX,offsetX,screenX,pageX]

    前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...

  3. event对象中 target和currentTarget 属性的区别。

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

  4. 小程序开发 event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...

  5. 当调用对象中不存的方法、属性时，__getattr__的应用场景

    一.Python中创建类和实例的调用顺序 new(cls) 创建对象前调用,如果类中没定义,会一直向父类找,直到object的 new 方法创建类.cls代表类本身 init(self) 创建类实例后 ...

  6. 【ASP.NET】DataContract序列化，反序列化对象中包含用接口声明的属性时的处理方法

    为此对象添加KnownType属性(Attribute).类型为用接口声明的属性(Property)的所有可能类型.  示例如下: public interface IKey { [DataMembe ...

  7. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

  8. Lua-面向对象中函数使用时冒号(:)和点(.)的区别

    先来看一段简单的代码: local Animal = {} function Animal:Eat( food ) print("Animal:Eat", self, food) ...

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

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

随机推荐

  1. MySQL从本地向数据库导入数据

    本文来自:https://www.cnblogs.com/lettuce-u/p/10715795.html(自己收藏看) 在localhost中准备好了一个test数据库和一个pet表: mysql ...

  2. Java并发知识分享

    volatile的内存语义 从JSR-133(即从JDK1.5开始),volatile变量的写-读可以实现线程之间的通信 当写一个volatile变量时,JMM会把该线程对应的本地内存中的共享变量值刷 ...

  3. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  4. 20165214 2018-2019-2 《网络对抗技术》Exp3 免杀原理与实践 Week5

    <网络对抗技术>Exp3 免杀原理与实践 Week5 一.实验内容 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shell ...

  5. nova98 假区域链 骗人项目（vexx.pro的前身）

    首先,我是受害者. nova98前期是vexx.pro,前期推广送比特龙, 送3个,然后推广一个新人可以再拿到1.5个. 然后呢,现在就又推出一个新网站,nova98,把之前推广的人领到币全部清零,而 ...

  6. Java编程思想 - 第11章 持有对象

    · 大量笔记存放在Github Java文件中,请移步查看:https://github.com/iGuure/AndroidCodeHub/tree/master/Java%20pratice/Th ...

  7. linux 计划任务 访问某个URL

    1.进入crontab文件的编写状态: crontab -e 2.进入编辑器后,按下 “ i ” 键,进入编辑模式,在编辑模式下,我们写上我们这次需要访问执行的脚本: 59 23 * * * /usr ...

  8. java 二分法学习

    假设有一个数组 { 12, 23, 34, 45, 56, 67, 77, 89, 90 },现要求采用二分法找出指定的数值并将其在数组的索引返回,如果没有找到则返回 -1.代码如下: package ...

  9. HttpClient 通过代理访问验证服务器

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  10. 3D数学基础（四）四元数和欧拉角

    一.四元数 四元数本质上是个高阶复数,可视为复数的扩展,表达式为y=a+bi+cj+dk.在说矩阵旋转的时候提到了它,当然四元数在Unity里面主要作用也在于此.在Unity编辑器中的Transfor ...