今天开发碰到一个奇怪的bug,我打断点时,查看 e.currentTarget 时有值的,但是直接 log 时为空,程序非异步执行没问题,但是放到异步中,就会报空错误。到底是为什么呢?
log 原理
首先解释一下为啥 log 时为空呢?主要原因在于 log 不是记录那一个时刻的值,而是一个引用。
具体怎么解释呢,直接通过解释吧
var p = { name: 'Ethan' }
console.log(p)
p.name = 'Ethan-new'
此时你查看控制台,会看到name
为新的值。
为何e.currentTarget
后面会被修改为null
呢?据不完全正确说法:事件冒泡已经结束后,e.currentTarget
会被置为 null
。
异步报错
报错原因和 log 原理类似,非异步执行,在事件处理期间,能正确获取到e.currentTarget
值,但是异步时,由于冒泡已经结束,因此取值就会为空。
如何解决呢?通过一个变量,存储好值即可。
var currentTarget = e.currentTarget
区别
e.target:常用在事件委托中,用来得到具体触发事件的DOM对象
e.currentTarget:用来得到绑定事件的DOM对象