前言
- 一般写addEventListener,我们的listener都会收到一个事件对象,而这个事件对象的类型TS却认为是Event类型,而其target判断为EventTarget类型,给的类型比较大,往往都需要我们进行断言,为什么不好判断?难道真的有意料之外的结果?
- 特别是一些我们感觉很确定的东西,比如MouseEvent,是click后的事件,不管屏幕上怎么点击,点的怎么看都是个HTMLElement,难道还会有别的东西?
Event EventTarget Node Document HTMLElement 区别
- HTMLElement extends Element
- Element extends Node , Document extends Node
- Node extends EventTarget
- Event是发生在dom的事件,其中target属性为 EventTarget | null
- Node有很多dom的API,Document 与Element又进行扩充,像className就是Element特有的,document有cookie,domain之类特有的。
- 而HTMLElement就是扩充自Element,比Element多了offsetHeight之类属性。
自定义事件
- 了解了上面关系,再说下主角,就是自定义事件,就是这个特性的存在,导致不好判断这个事件对象到底是个啥。
- 我们以MouseEvent举例,通常情况下,
document.addEventListener('click',listener)
这个语句中,listener就会接收到Event类型的参数,这时e.target
的类型是EventTarget | null
类型能否是HTMLElement?
- 答案肯定是不行,我们可以使用自定义事件传个负值过去,就像这样:
document.dispatchEvent(new MouseEvent('click',{clientX:-1,clientY:-1}))
document.dispatchEvent(new MouseEvent('click',{target:'123'}))
- 这样找不到target,target就会变成document,而根据第一节,document是Document类型,比HTMLElement类型要大,所以不行。
类型能否是Node?
- 根据第一节可以发现,这个EventTarget有很多属性没有,是个比Node还大的玩意,那么可能产生不是Node但是却属于EventTarget的东西吗?这还真有,MDN举出了3种特殊例子, XMLHttpRequest,AudioNode,AudioContext。
XMLHttpRequest extends XMLHttpRequestEventTarget extends EventTarget
可以看见,这个XMLHttpRequest既不属于Node,但是却属于EventTarget,满足了要求。另外2个不举例了。 - 虽然满足了要求,但一个click事件怎么会给你传一个XMLHttpRequest的???这怎么看也不对啊,就算你点的再偏,顶多给你传个document,怎么会传XMLHttpRequest的?
- 可以看一下这个骚操作:
let a=new XMLHttpRequest
a.addEventListener('click',(e)=>console.log(e))
let event = new Event('click')
a.dispatchEvent(event)
- 诡异的XMLHttpRequest居然可以用addEventListener,最后e的打印结果:
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
defaultPrevented: false
eventPhase: 0
isTrusted: false
path: []
returnValue: true
srcElement: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
target: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
timeStamp: 4900758.515000053
type: "click"
- 这就使得target并不是Node类型,而是更大的EventTarget类型。
- 有人就会说,那TS咋不能直接看调用者来进行更细的判断,如果调用者是Node,那么它的listener的target就应该是Node类型,如果调用者是XMLHttpRequest,那么它的 listener的target就应该是XMLHttpRequest类型。
- 没错,TS的特性其实是可以办到的,但是目前情况就是所有的类型全部都由EventTarget扩展,而target属性全部用的都是Event上的Target属性。
- 最好的解决方法就是对EventTarget添加泛型支持,这样只要传入相应的泛型,就能直接获得想要的对象,这个问题存在了近5年还没有解决,并且问题仍然在开放中,根据作者描述,他们的声明文件是通过软件自动生成的,这个源文件不能放出来给你看,另外,如果要添加泛型,会导致过不了性能测试。