event对象中 target 和 currentTarget 的区别

从概念上来说

1. event.target 返回触发事件的元素
2. event.currentTarget 返回绑定事件的元素

只看这两句话不够直观，下面看代码

<div id="btn">click me</div>

<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.onclick = function (event) {
        console.log(event.target);           // <div id="btn">click me</div>
        console.log(event.currentTarget);    // <div id="btn">click me</div>
        console.log(event.target === event.currentTarget);   // true
    }
</script>

这段代码可以看出来， event.target 和 event.currentTarget是一样，这是因为绑定点击事件的元素没有嵌套，点击的元素就是绑定事件的元素。

下面看下有嵌套关系存在的情况。

<div id="btn1">
	click me1
	<div id="btn2">click me2</div>
</div>

<script type="text/javascript">
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function (event) {
        console.log(event.target);
        console.log(event.currentTarget);
        console.log(event.target === event.currentTarget);
    }
	// 点击 click me1 时，输出如下
	// <div id="btn1">...</div>
	// <div id="btn1">...</div>
	// true
	
	// 点击 click me2 时，输出如下
	// <div id="btn2">click me2</div>
	// <div id="btn1">...</div>
	// false
</script>

上面代码点击 click me2 时，可以很明显的看出，触发事件的元素和绑定事件的元素不是同一个元素，event.target 获取的是点击的元素， event.currentTarget 获取的是绑定点击事件的元素。