乐趣区

关于javascript:JavaScript中eventtarget与this区别

明天在看一段代码的时候发现了一个 event.target,那么什么是 event.target 呢
target 属性可返回触发事件的指标节点,简略来说,他会返回鼠标所点击的间接触发事件的节点。 从这点来说,与 this 是非常相像的,那么两者有什么区别呢

<body>
    <ul>
        <li> 我是第 1 个元素 </li>
        <li> 我是第 2 个元素 </li>
        <li> 我是第 3 个元素 </li>
        <li> 我是第 4 个元素 </li>
        <li> 我是第 5 个元素 </li>
    </ul>
</body>
<script>
    $("li").click(function (event) {console.log(this)
        console.log(event.target);
    })
</script>

当咱们点击第一个 li 标签时,两者输入的后果是一样的

当给父元素 ul 标签增加同名函数(触发事件冒泡)

<script>
    $("ul").click(function (event) {console.log(this)
        console.log(event.target);
    })
</script>

此时点击第一个 li 标签的时候,this 输入了 ul 标签,而 event.target 输入了 li 标签

由此能够看出,在没有事件冒泡的时候,this 与 event.target 返回值是雷同的,都为触发事件的指标节点,而当触发事件冒泡后,this 变为 ul 标签,而 event.target 依然为 li 标签

总结:this 与 event.target 的区别为 this 可变,当含有事件冒泡时,this 始终指向该函数的调用者,而 event.target 则不会变,始终指向触发该事件的指标节点

退出移动版