JavaScript教程:事件对象-获取事件源:target和currentTarget

说明

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

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

获取方式

通过事件对象的 targetcurrentTarget

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

target 和 currentTarget 相同

当点击按钮时,触发按钮的响应函数,此时 targetcurrentTarget 相同

<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 不相同

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

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

原文出处:http://www.malaoshi.top/show_1IX6WEL4Olzi.html