说明

通过事件对象，可以获取到事件源

事件源：就是触发该事件的 DOM 对象

获取方式

通过事件对象的 target 和 currentTarget

• target：触发该事件的 DOM 对象
• currentTarget：触发该事件的 DOM 对象。在 冒泡触发父元素的事件函数时，该对象是 父元素的 DOM 对象

target 和 currentTarget 相同

当点击按钮时，触发按钮的响应函数，此时 target 和 currentTarget 相同

<input type="button" value="按钮" id="btn" />

<script type="text/javascript">
    document.getElementById("btn").addEventListener("click",function(e){
        // 事件源，触发该事件的标签
        console.log("btn--target:",e.target)
        console.log("btn--currentTarget:",e.currentTarget)


    })

</script>

target 和 currentTarget 不相同

当点击按钮时，由于冒泡机制，触发按钮的 父元素的响应函数，此时 target 和 currentTarget 不相同

<input type="button" value="按钮" id="btn" />


<script type="text/javascript">
    // 按钮事件
    document.getElementById("btn").addEventListener("click",function(e){
        // 事件源，触发该事件的标签
        console.log("btn--target:",e.target)
        console.log("btn--currentTarget:",e.currentTarget)

    })
    // body事件
    document.body.addEventListener("click",function(e){

        // 事件源，触发该事件的标签
        console.log("body--target:",e.target) // 按钮的dom对象
        console.log("body--currentTarget:",e.currentTarget) // 父元素的dom对象
    })
    // html事件
    document.documentElement.addEventListener("click",function(e){

        // 事件源，触发该事件的标签
        console.log("html--target:",e.target) // 按钮的dom对象
        console.log("html--currentTarget:",e.currentTarget) // 父元素的dom对象
    })
</script>