先上结论：

　　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. 【一：定义】python 简介

    [python基础介绍的比较好的link] https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac927076 ...

  2. JavaScript 实时 全角转半角

    //JavaScript全角字符转半角(参数str为input框输入的内容)var $fullChar2halfChar = function(str) { var result = ''; for ...

  3. SQLZOO网页中SQL的答案(SELECT from nobel篇)

    SELECT from nobel篇 1. 更改查詢以顯示1950年諾貝爾獎的獎項資料. 答案: SELECT yr, subject, winner FROM nobel WHERE yr = 19 ...

  4. day14 内置函数二

    lamda 语法: 函数名 = lambda 参数: 返回值注意: 1. 函数的参数可以有多个. 多个参数之间⽤逗号隔开 2. 匿名函数不管多复杂. 只能写⼀⾏, 且逻辑结束后直接返回数据 3. 返回 ...

  5. TSMBIOS

    TSMBIOS Object Pascal language (Delphi or Free Pascal). https://github.com/RRUZ/tsmbios

  6. gulp的使用(二)之gulpfile.js文件的配置

    Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...

  7. java ftp上传文件 工具类

    package com.learning.spboot.utils; import com.jcraft.jsch.*; import org.apache.commons.net.ftp.FTPCl ...

  8. ajax如何渲染数据

    染数据的方法 1).字符串拼接,  最常用的方法 优点:只进行一次dom回流 缺点:原有dom的事件都会丢失 原因:就在于innerHTML这个属性,这个属性是返回或设置dom中的内容,以字符串形式返 ...

  9. B-食物链-经典并查集

    动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用两种 ...

  10. mac eclipse maven -solved

    最近开始用mac,在开始之初体验到了mac系统的丝滑流畅,但也感受到重新开始学习一个平台的坡度. 最近学习maven,创建项目时总是报错,网上查阅到的资料很少.最后在settings.xml中添加了阿 ...