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 ...
随机推荐
- 初写Linux脚本坑记录
1.为变量赋值时=前后一定没有空格. 2.赋值时变量为xx,读取才是$xx.如赋值是$xx,则报语法错误.参考 http://www.jb51.net/article/52375.htm 3.脚本每句 ...
- static(静态)关键字
class Person{String name; //成员变量,实例变量(实例中的变量) //共享数据出现在对象之前static String country="cn"; //对 ...
- HTML中data-* 属性
使用 data-* 属性来嵌入自定义数据: <ul><li data-animal-type="bird">Owl</li><li dat ...
- HTML网页音频控制
// 音频播放function playSound(url) { var borswer = window.navigator.userAgent.toLowerCase(); var audio; ...
- case when 和 decode 的比较分析
一.case when 与 if - else 类似,语句如下:CASE expr WHEN expr1 THEN return_expr1 [WHEN expr2 THEN retu ...
- 判断浏览器大于等于ie9
方便自己查找 <script> (function (window) { var theUA = window.navigator.userAgent.toLowerCase(); if ...
- hadoop.docker.up.problems: Too many levels of symbolic links
#root@c7hp:~ excp c78 "zkServer.sh start"[1] 11:49:44 [FAILURE] c78 Exited with error code ...
- react-native-printer
react-native-printer A React Native Library to support USB/BLE/Net printer for Android platform Inst ...
- SQL数据库中查询中加N'' 前缀是什么意思
It's declaring the string as nvarchar data type, rather than varchar You may have seen Transact-SQL ...
- 将lvm逻辑卷分出一部分
今天公司磁盘报警,查看磁盘发现挂载的/aa空间还很多,而/ee 空间不足,现将/aa上的lvm分出一部分空间.加到/ee上 注:首先要 df -T -h 开一下磁盘格式如果是xfs格式的lvm ...