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 ...
随机推荐
- 指导手册 07 安装配置HIVE
指导手册 07 安装配置HIVE 安装环境及所需安装包: 1.操作系统:centos6.8 2.四台虚拟机:master :10.0.2.4, slave1:10.0.2.5,slave2:10. ...
- iOS 判断一个类是否存在，NSStringFromClass 不用 import 就可以获取类
Class myCls = NSClassFromString(@"Person"); NSString *str = NSStringFromClass(myCls); if ( ...
- maven profile实现多环境配置
每次项目部署上线都需要手动去修改配置文件(比如数据库配置,或者一个自定义的配置)然后才能打包,很麻烦,网上找到 maven profile可以完成这个工作,记录如下: 环境:eclipse + spr ...
- NLog使用整理
NLog使用中碰到的问题整理 1,日志写mysql数据库报错, 原因: 在sql语句中使用了mysql的函数now() 导致插入失败, 解决办法: 使用参数代替now(). 在nlog配置文件中设置 ...
- VMware Pro 14.1.2 官方正式版及激活密钥
热门虚拟机软件VMware Workstation Pro现已更新至14.1.2,14.0主要更新了诸多客户机操作系统版本,此外全面兼容Wind10创建者更新.12.0之后属于大型更新,专门为Win1 ...
- SharePoint Framework 向web部件中添加外部库
博客地址:http://blog.csdn.net/FoxDave 在进行开发的时候,你很可能会想要引用一些公开的JavaScript库到你的项目中,本文将会介绍如何打包和共享这些库. 打包脚本 默认 ...
- socket.error: [Errno 99] Cannot assign requested address
方法一:python 命令行下运行 vi /etc/hosts 将127.0.1.1 那一行的名字改成你的(用 vi /etc/hostname 获取) 127.0.0.1 localhost 12 ...
- selenium中的alter弹框
from selenium import webdriverimport timedriver=webdriver.Chrome()driver.get('http://ui.imdsx.cn/uit ...
- vue跳坑笔记
序号 报错截图 关键词 解决办法 1 - code EPERM errno 4048 syscall scandir operation not permitted 清除npm缓存,命令: npm c ...
- linux install ftp server
first yum install vsftpd 第二部:vi /etc/vsftpd/vsftpd.conf 添上下面一段话 anonymous_enable=YESlocal_enable=YE ...