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

target、this、currentTarget区别

区别:

举个例子:

分析:

猜你喜欢