最近在复习Java script时,DOM事件对象中有两个属性没搞明白,就是target和currentTarget,分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询。
w3school中对target的定义为:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
w3school中对currentTarget的定义为:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。在捕获和起泡阶段,该属性是非常有用的,因为在这两个节点,它不同于 target 属性。
看完定义和他给的例子还是一脸雾水,因此动手操作了一番。
请看下面例子!
<html>
<head>
<title>
target 和 currentTarget的区别
</title>
<style>
.size{
width:100%;
height:30px;
text-align:center;
line-height:30px;
}
.a{
background:red;color:#fff;margin-bottom:30px;
}
.b{
background:blue;color:#fff;
}
</style>
</head>
<body>
<div style="background:black;padding:30px;" onclick="isWho(event,this)">
<div class="size a">A</div>
<div class="size b">B</div>
</div>
<script>
function isWho(e,t){
if(t == e.target)document.write('this is e.target<br>');
if(t == e.currentTarget)document.write('this is e.currentTarget');
document.write('<br>target:');
document.write(e.target.innerHTML);//target:实际点击触发事件的节点
document.write('<br>currentTarget:');
document.write(e.currentTarget.innerHTML);//currentTarget:函数/事件绑定的节点
}
</script>
</body>
</html>