target与currentTarget的区别

发表于 | 分类于

介绍

在事件处理函数的event对象中，有一个target属性，我们都知道它是指事件目标。其实在event中还有一个currentTarget属性，不知道这个属性还好，知道的话可能会弄混与target的区别。

先看下定义（参考JS高级程序设计）：

  • target：事件的目标
  • currentTarget：其事件处理程序当前正在处理事件的那个元素

看完这两个定义，或许还是似懂非懂的感觉，我一直觉得实践是最好的验证方法，所以来写个极其简单的例子吧。

实例

html文件，写一个简单的列表

1
2
3
4
5
<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
</ul>

js文件

1
2
3
4
5
6
7
var aUl = document.getElementsByTagName('ul')[0];

aUl.addEventListener('click',function(event){
	console.log(this);
	console.log('target: ',event.target);
	console.log('currentTarget: ',event.currentTarget);
},false)

当看到这个例子，你或许就明白我要说啥了。运行程序，会发现，target指向你所点击的那个li元素，而currentTarget始终指向ul元素。

所以，我可以用自己的话再来定义一下这两个属性了：

  • target：指向触发事件的元素。上例中，是li触发的事件，冒泡到ul上执行的
  • currentTarget：指向添加事件的元素。很好懂啊，上例中，事件是绑定在ul上的

另外需要注意的是，this始终等于currentTarget，在上例中，始终指向ul，不信的话也可以试下啊，我们将事件绑定到第二个li上试试：

1
2
3
4
5
6
7
8
var aUl = document.getElementsByTagName('ul')[0];
var aLi = aUl.getElementsByTagName('li')[1];

aLi.addEventListener('click',function(event){
	console.log(this);
	console.log('target: ',event.target);
	console.log('currentTarget: ',event.currentTarget);
},false)

结果就不用多说了。