event.target和event.currentTarget

首先本质区别是：

event.target返回触发事件的元素

event.currentTarget返回绑定事件的元素

事件捕获

事件冒泡

我们为一个元素绑定一个点击事件的时候，可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定，当第三个参数为false或者为空的时候，代表在冒泡阶段绑定。

知道事件有这么一个穿透的过程之后，结合下面的例子，就可以很好来理解event.target和event.currentTarget：

    document.getElementById('a').addEventListener('click', function(e) {

   

     

       

     

   

上面事件的绑定都是在冒泡阶段的，当我们点击最里层的元素d的时候，会依次输出:

target:d¤tTarget:d

target:d¤tTarget:c

target:d¤tTarget:b

target:d¤tTarget:a

从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。

如果我们把事件都绑定在捕获阶段，然后还是点击最里层的元素d，这时event.target还依旧会指向d，因为那是引起事件触发的元素，因为event.currentTaget指向事件绑定的元素，所以在捕获阶段，最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下：

target:d¤tTarget:a

target:d¤tTarget:b

target:d¤tTarget:c

target:d¤tTarget:d