target、this、currentTarget三个关键词用在事件处理函数中,
区别:
- target:触发事件的某个具体对象, 比如click事件就指的是实际点击的对象
- currentTarget:绑定事件的对象,恒等于this,并不一定是实际触发者
- 通常情况下terget和currentTarget是一致的,我们只要使用terget即可,但有一种情况必须区分这三者的关系,那就是在父子嵌套的关系中,父元素绑定了事件,单击了子元素(根据事件流,在不阻止事件流的前提下他会传递至父元素,导致父元素的事件处理函数执行),这时候currentTarget指向的是父元素,因为他是绑定事件的对象,而target指向了子元素,因为他是触发事件的那个具体对象
举个例子:
一个父级div内有一个儿子div, 给两个div绑定点击事件, 然后点击儿子div:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="父级">
<div id="儿子" style="width:100px; height:100px; background-color:yellow"></div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('儿子');
var b=document.getElementById('父级');
a.addEventListener("click",show);
b.addEventListener("click",show);
function show(event)
{
console.log("this.id="+this.id);
console.log("event.target.id="+event.target.id);
console.log("event.currentTarget.id="+event.currentTarget.id);
}
</script>
</html>
分析:
虽然绑定时我们没有给处理函数show传参, 但是浏览器会为其传入事件对象,也就是我们的形参event
因为儿子div在上所以我们实际点击的是儿子div, 由于是事件冒泡,所以先触发的是儿子div, 后触发的是父级div,
至于为什么是冒泡,什么是冒泡,为什么父级div事件会被触发 ,请看我的另一篇博客的介绍:https://mp.csdn.net/postedit/83051271
输出中可以看到this和currentTarget永远是相等的(以下不再分析this, 与currentTarget相同), 但target却有时不一样,
- target指的是触发事件的某个具体对象, 也就是我实际点击的对象, 即儿子div, 所以对于儿子div和父级div事件处理函数输出的都是儿子
- currentTarget:绑定事件的对象, 前三个输出的是儿子绑定的事件处理函数, 输出的就是儿子, 后三个输出的就是父级绑定的事件处理函数, 输出的就是父亲
- this等于currentTarget