Event对象中的target属性和currentTarget属性的区别
先上结论：
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属性的区别的更多相关文章
- JS:event对象下的target属性和取消冒泡事件
1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...
- [1]区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...
- event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- 当调用对象中不存的方法、属性时，__getattr__的应用场景
一.Python中创建类和实例的调用顺序 new(cls) 创建对象前调用,如果类中没定义,会一直向父类找,直到object的 new 方法创建类.cls代表类本身 init(self) 创建类实例后 ...
- 【ASP.NET】DataContract序列化，反序列化对象中包含用接口声明的属性时的处理方法
为此对象添加KnownType属性(Attribute).类型为用接口声明的属性(Property)的所有可能类型. 示例如下: public interface IKey { [DataMembe ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- Lua-面向对象中函数使用时冒号(:)和点(.)的区别
先来看一段简单的代码: local Animal = {} function Animal:Eat( food ) print("Animal:Eat", self, food) ...
- 彻底弄懂小程序e.target与e.currentTarget
一.小程序中关于事件对象 e 的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...
随机推荐
- SQL-59 按照salary的累计和running_total，其中running_total为前两个员工的salary累计和，其他以此类推。
题目描述 按照salary的累计和running_total,其中running_total为前两个员工的salary累计和,其他以此类推. 具体结果如下Demo展示..CREATE TABLE `s ...
- android spf 存储 集合（实体等）
package com.example.sharedpreferencelist; import java.io.ByteArrayInputStream;import java.io.ByteArr ...
- Python列表的增删改查和元祖
一.定义列表 1.names = ['mike','mark','candice','laular'] #定义列表 2.num_list = list(range(1,10)) #range生成1-1 ...
- 依赖注入之setter注入---只需修改配置，电脑就可以安装不同的打印机；读取properties配置文件并创建实例；实现不采用new的方式直接实例化对象
1.项目截图 2.黑白打印机类 package com.example.demo.printer; public class GrayPrinter implements Printer{ @Over ...
- Java继承2
1.为什么使用继承 从已有的类派生出新的类,称为继承. 在不同的类中也可能会有共同的特征和动作,可以把这些共同的特征和动作放在一个类中,让其它类共享. 因此可以定义一个通用类,然后将其扩展为其它多个特 ...
- Node.js和html数据交互（一） form表单
一.form表单提交数据 数据流向:前端 - > 后端 1.get方法 (action是提交路径,method是提交方法,get方法可以不写) 前端: <form action=" ...
- iftop流量监控工具
下载iftop工具的源码包 # wget http:oss.aliyuncs.com/aliyunecs/iftop-0.17.tar.gz 安装所需的依赖包 # yum -y install gcc ...
- python学习第三次记录
python学习第三次记录 python中常用的数据类型: 整数(int) ,字符串(str),布尔值(bool),列表(list),元组(tuple),字典(dict),集合(set). int.数 ...
- Tmux会话-基本操作及原理
一.Tmux命令介绍: Tmux (“Terminal Multiplexer”的简称), 是一款优秀的终端复用软件,类似 GNU screen,但比screen更出色. tmux来自于OpenBSD ...
- Springboot 定时任务，service层无法注入问题详细解决
开发一个微信小程序后台,建立websocket 长连接,需要后台开启定时任务, 定时任务定时查库,相应前台 但是具体执行过程中一直在报空指针错误,最后定位到service 为空,无法调用其相关的方法导 ...