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 ...
随机推荐
- jS弹出新窗口被拦截的解决方法
使用ajax处理数据,在回调中跳转到或打开新页面,这时就会被浏览器拦截 解决方案:先用window.open打开一个窗口,然后修改该窗口地址 var w = window.open('about:bl ...
- python基础（字符串常用方法）
字符串不常用方法: 字符串常用的方法: #看源代码 按住ctrl点击方法名 用户注册的小程序 import datetimeusers = []passwds = []for i in range(3 ...
- MySQL5.7关于密码二三事
MySQL5.7关于密码二三事 第一个:update user set password=password('root') where user='root' and host='localhost' ...
- mssql server 数据库帮助类
using System; using System.Collections.Generic; using System.Text; using System.IO; using System.Web ...
- tuxedo 提供buildserver命令编译服务器进程
转自:http://blog.sina.com.cn/s/blog_5413cc0f0100nbgc.html 事实上buildserver只完成预编译,它会调用当前操作系统中已经安装的默认C编译器来 ...
- scrapy框架修改单个爬虫的配置,包括下载延时，下载超时设置
在一个框架里面有多个爬虫时,每个爬虫的需求不相同,例如,延时的时间,所以可以在这里配置一下custom_settings = {},大括号里面写需要修改的配置,然后就能把settings里面的配置给覆 ...
- c++ — 运算符重载与strcmp自实现
#include <iostream> #include <string.h> #include <stdlib.h> using namespace std; c ...
- java.io.IOException: 你的主机中的软件中止了一个已建立的连接。
1.异常表现:我在jsp文件中有一个<form>表单,里面有一个<button>保存事件按钮.<button onclick="addOrUPdate()&q ...
- nginx 带? rewrite 规则
由于需要重定向 url ,nginx需要rewrite .参考文献 http://huangqiqing123.iteye.com/blog/2083434 需求:将http://10.106.1.3 ...
- 关于linux 共享内存查看已经完整释放
完整删除共享内存脚本 #!/bin/sh function rmshm() { zero_status=`ipcs -m|awk '{print $6}'|grep -w 0|wc -l` if [ ...