2

先上图:
图片描述

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

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

<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

代码:

<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>

southnan0
156 声望8 粉丝

欲买桂花同载酒,终不似,少年游