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
返回false
。e.currenttarget
和e.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 指向添加监听事件的对象。
推荐阅读
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- Docker应用:容器间通信与Mariadb数据库主从复制
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 第326天
- Shell-Bash变量与运算符
- 逻辑回归的理解与python示例
- Guava|Guava RateLimiter与限流算法
- 我和你之前距离
- CGI,FastCGI,PHP-CGI与PHP-FPM
- 原生家庭之痛与超越