target与currentTarget的区别

这两天去面试的两个小伙伴都遇到了一个问题,面试官问到你用jQuery的时候有没有用过target和currentTarget?他们的区别是什么?他们都是一脸懵,平时练习也没有用过currentTarget啊?其实currentTarget这个属性很是鸡肋,其实我们平时也用不到,下面我们通过两个例子说明平时我们为什么用不到:
举个例子:

  • 按钮1
  • 按钮2
  • 按钮3
  • 按钮4


【target与currentTarget的区别】我们知道,e.target可以用来实现事件委托,e.target指向用户点击的li,而e.currentTarget指向的是给绑定事件监听的那个对象,即ul,从这里可以发现,e.currentTarget===this返回true,而e.target===this返回falsee.currenttargete.target是不相等的。
总结:
上面的例子是:省略selector或者是null,那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时,就会执行处理程序,不管它直接绑定在元素上,还是从后代(内部)元素冒泡到该元素的
再举一例:
  • hello 1
  • hello 1
  • hello 1
  • hello 1


总结:
上面的例子:当li中含有子元素的时候,如果点e.target指的是触发事件的元素,可能是span也可能是li,此时的e.currentTarget指的是selector那个参数,也就是本例中的li。
还有一种情况举例:
  • hello 1
  • hello 2
  • hello 3
  • hello 4

let ul = document.querySelectorAll('ul')[0] let aLi = document.querySelectorAll('li') for(let i=0; i

在本例中,事件的目标阶段即li,由于e.currentTarget始终指向添加监听事件的那个对象,即aLi[i],也就是HTML中的li,而e.target指向触发事件监听的那个对象,也是li,因此e.target和e.currentTarget相等,同时也和this相等。
总结 因此不必记什么时候e.currentTarget和e.target相等,什么时候不等,理解两者的究竟指向的是谁即可。
e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。

    推荐阅读