时间属性target和currentTarget的区别

最近在复习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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。