event.target的亲兄弟event.currentTarget

作者:ManfredHu
链接:http://www.manfredhu.com/2016/05/30/17-eventCurrentTarget/index.html
声明:版权所有,转载请保留本段信息,谢谢大家

Target

做项目的时候遇到的一个挺好玩的属性,就是event.currentTarget这个东西,可能我们以前用的比较多的是event.target

场景

我们在列表下<li>标签绑定了事件,然后<li>下是一堆的<i> 标签用作动画。并且<li>上有用属性定义着要跳转的地址。

提取例子

1
2
3
4
<ul id="outer">
<li id="inner"></li>
</ul>
<div id="result"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body {
padding: 25px;
font-family: Helvetica, Arial, sans-serif;
}

#outer {
float: left;
padding: 50px;
margin: 0 0 25px;
background-color: #086FA1;
}

#inner {
width: 100px;
height: 100px;
background-color: #3CA0D0;
}

#result {
clear: left;
}

code {
font-size: 1.2em;
}

p, ul {
margin: 0 0 25px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var outer = document.getElementById('outer'),
result = document.getElementById('result');

outer.addEventListener('click', function (e) {
var html = '';
if (e.target === outer && e.currentTarget === outer) {
html += '<p>Outer element was clicked directly - it is <code>e.target</code> <em>and</em> <code>e.currentTarget</code>.</p>';
}

if (e.target !== outer && e.currentTarget === outer) {
html += '<p>Outer element is the current target, but it was not clicked directly - it is <code>e.currentTarget</code>.</p>';
}

html += [
'<ul>',
'<li><code>e.target === &lt;div id="', e.target.id, '"&gt;</code></li>',
'<li><code>e.currentTarget === &lt;div id="', e.currentTarget.id, '"&gt;</code></li>',
'</ul>'
].join('');

result.innerHTML = html;

});

总结

针对不同的属性,总结两点如下:

  • event.target捕获发出事件的目标,也是就相当于事件的产生者的意思
  • event.currentTarget则是相当于事件冒泡被设置好监听的对象捕获了。

所以如果遇到外层元素如果设置了监听函数而里面还有其他元素的情况下,为了防止点击里面的元素通过event.target获取不到事件对象,可以用event.currentTarget来获取。

展开目录
评论
分享
音乐
Github TOP

Copyright © 2015 - 2019 ManfredHu胡文峰的个人博客

All rights reserved. Designed and powered by ManfredHu.

粤ICP备18133029号