event.target 和 event.currentTarget

时间 2020-01-29

标签 event.target event target event.currenttarget currenttarget 繁體版

原文原文链接

先上图：
spa

1. 当点击对象与事件监听对象是同一个时，event.target 和 event.currentTarget 获得的是同一个对象

在红色区域的div绑定点击事件的监听，点击红色区域，此时，event.target 指的是当前点击的对象，即红色div的DOM对象，而event.currentTarget指得是点击事件绑定的对象，也是红色区域的divcode

<div id="outer">
    <div id="inner">123</br>333</div>
</div>

<script>
    document.getElementById('inner').onclick = function(e){
        console.info('e.target',e.target)            //<div id="inner">...</div>
        console.info('e.currentTarget',e.currentTarget)     //<div id="inner">...</div>
    }
</script>

2. 当点击对象与事件监听对象不是同一个时，event.target 和 event.currentTarget 获得的不是同一个对象

在外层的div绑定点击事件的监听，点击红色区域，此时，event.target 指的是当前点击的对象，即红色div的DOM对象，而event.currentTarget指得是点击事件绑定的对象，即外层div对象

代码：blog

<div id="outer">
    <div id="inner">123</br>333</div>
</div>

<script>
    document.getElementById('outer').onclick = function(e){
        console.info('e.target',e.target)            //<div id="inner">...</div>
        console.info('e.currentTarget',e.currentTarget)//<div id="outer">...</div>
    }
</script>