event对象中 target和currentTarget 属性的区别

首先本质区别是：

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

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

例如：

  ul
  
lia
  
lia
  
lia

查看效果
https://images2015.cnblogs.com/blog/1043508/201612/1043508-20161213195409558-895348805.gif

当我点击哪个元素时，event.target返回的是点击的元素节点，我们可以用返回的节点使用一些DOM对象上的一些操作。这里event.preventDefault，是用来阻止点击a默认跳转，刷新页面导致结果不能输出来的一个作用。

event.currentTarget的作用是什么呢，我觉得他和this 的作用是差不多的，始终返回的是绑定事件的元素

  ul
  
lia
  
lia
  
lia

查看效果
https://images2015.cnblogs.com/blog/1043508/201612/1043508-20161213200558714-2071145678.gif

实际使用中target的妙用：

target事件委托的定义：本来该自己干的事，但是自己不干，交给别人来干。比如上面的例子中，应该是ul li a 来监控自身的点击事件，但是li a自己不监控这个点击事件了，全部交给li父节点和a祖父节点ul来监控自己的点击事件。一般用到for循环遍历节点添加事件的时候都可以用事件委托来做，可以提高性能。

来个案例：一个添加删除的demo。

 

  
第1个删除
  
第2个删除
  
第3个删除

查看效果
https://images2015.cnblogs.com/blog/1043508/201612/1043508-20161213202054151-349639415.gif

为什么在第24行也需要一个for循环，给每个删除按钮添加事件呢，因为外面的for循环，在文档刷新时给页面中存在的三个删除按钮添加了点击事件，而后来添加的删除按钮并没有绑定事件，导致页面中存在的三个li标签可以删除，而后来新添加的li不能删除这个问题。我们使用事件委托来做就不用这么麻烦了

给ul添加了点击事件，点击ul里面的子元素，event.target都会返回当前点击的元素节点，做一个判断，如果点击了button标签，删除这个li节点。由于添加的li都在ul节点里面，所以并不用再去添加li事件里面去写代码了，是不是很方便呢。