【Typescript】探究为什么TS对EventTarget类型判断的比较大?

前言

  • 一般写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年还没有解决,并且问题仍然在开放中,根据作者描述,他们的声明文件是通过软件自动生成的,这个源文件不能放出来给你看,另外,如果要添加泛型,会导致过不了性能测试。

你可能感兴趣的:(typescript)